溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了移動web端屏幕適配rem的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
rem 介紹
rem 表示根元素（<html>）的 font-size 的大小。即如果根元素的 font-size 大小為 14px，則 1rem = 14px
rem 適配移動 web 端
適配效果
在不同尺寸的屏幕下，同一個元素的大小看起來不是一樣大的，但是它們所占屏幕寬度的比例是一樣的。
代碼
// 在 html 文件的 head 標(biāo)簽中
<script type="text/javascript">
(function(){
var html = document.documentElement;
// 獲取屏幕寬度（px）
var hWidth = html.getBoundingClientRect().width;
// 設(shè)置 html 標(biāo)簽的 font-size 大小為 hWidth/15
html.style.fontSize = hWidth/15 + 'px';
})()
</script>// 在 less 中
/* 定義變量@r：750/15 */
@r:50rem;
p {
width: 100/@r;
height: 200/@r;
}javascript 代碼
首先，我們將屏幕的 1/15 大?。╬x）復(fù)制給 html 標(biāo)簽的 font-size 屬性。此時，在任何尺寸的屏幕上，屏幕尺寸（px）的 1/15 px 都等于 1rem 的大小。即：在任何尺寸的屏幕上，只要給元素設(shè)置值相同的 rem，則在所有尺寸的屏幕上該元素所占屏幕寬度的比例是一樣的，所占比例一樣，就適配了所有尺寸的屏幕。
less 代碼
現(xiàn)在只需要將設(shè)計稿中元素的 px 單位轉(zhuǎn)換為 rem 單位。
所以，這個時候，我們可以把設(shè)計稿也當(dāng)成一個具有一定尺寸的手機屏幕。
在我這個例子中，設(shè)計稿的寬度為 750px。
所以，750/15 = 50px，即在設(shè)計稿這樣尺寸的手機屏幕中，1rem = 50px。
然后，在 less 代碼中，我們定義一個變量 @r。
量得 p 的寬度為 100px，因為在設(shè)計稿這樣尺寸的屏幕中，1rem = 50px，所以該 p 的 rem 的值為：100/50 rem，即 100/@r。
量得 p 的高度為 200px，因為在設(shè)計稿這樣尺寸的屏幕中，1rem = 50px，所以該 p 的 rem 的值為：200/50 rem，即 200/@r。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“移動web端屏幕適配rem的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼