移動 web 端屏幕適配(rem)
我要評論前言
最近整理了一下以前學習前端的筆記，發(fā)現(xiàn)自己對移動 web 端屏幕適配（rem）這一塊并沒有真正理解，只是會用。
接下來，把自己的一些對移動 web 端屏幕適配（rem）的思考記錄下來。
rem 介紹
rem 表示根元素（<html>）的 font-size 的大小。即如果根元素的 font-size 大小為 14px，則 1rem = 14px
rem 適配移動 web 端
適配效果
在不同尺寸的屏幕下，同一個元素的大小看起來不是一樣大的，但是它們所占屏幕寬度的比例是一樣的。
代碼
// 在 html 文件的 head 標簽中
<script type="text/javascript">
(function(){
var html = document.documentElement;
// 獲取屏幕寬度（px）
var hWidth = html.getBoundingClientRect().width;
// 設(shè)置 html 標簽的 font-size 大小為 hWidth/15
html.style.fontSize = hWidth/15 + 'px';
})()
</script>
// 在 less 中
/* 定義變量@r：750/15 */
@r:50rem;
div {
width: 100/@r;
height: 200/@r;
}
javascript 代碼
首先，我們將屏幕的 1/15 大小（px）復制給 html 標簽的 font-size 屬性。此時，在任何尺寸的屏幕上，屏幕尺寸（px）的 1/15 px 都等于 1rem 的大小。即：在任何尺寸的屏幕上，只要給元素設(shè)置值相同的 rem，則在所有尺寸的屏幕上該元素所占屏幕寬度的比例是一樣的，所占比例一樣，就適配了所有尺寸的屏幕。
less 代碼
現(xiàn)在只需要將設(shè)計稿中元素的 px 單位轉(zhuǎn)換為 rem 單位。
所以，這個時候，我們可以把設(shè)計稿也當成一個具有一定尺寸的手機屏幕。
在我這個例子中，設(shè)計稿的寬度為 750px。
所以，750/15 = 50px，即在設(shè)計稿這樣尺寸的手機屏幕中，1rem = 50px。
然后，在 less 代碼中，我們定義一個變量 @r。
量得 div 的寬度為 100px，因為在設(shè)計稿這樣尺寸的屏幕中，1rem = 50px，所以該 div 的 rem 的值為：100/50 rem，即 100/@r。
量得 div 的高度為 200px，因為在設(shè)計稿這樣尺寸的屏幕中，1rem = 50px，所以該 div 的 rem 的值為：200/50 rem，即 200/@r。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Html5移動端適配IphoneX等機型的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起2019-06-25- 這篇文章主要介紹了rem適配移動設(shè)備的方法示例的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-25
- 這篇文章主要介紹了淺談移動端適配大法的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-05
這篇文章主要介紹了詳解如何使用image-set適配移動端高清屏圖片的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-14- 這篇文章主要介紹了詳解H5 活動頁之移動端 REM 布局適配方法的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-07
- 這篇文章主要介紹了html5實現(xiàn)移動端適配完美寫法,需要的朋友可以參考下2017-11-16
- 這篇文章主要介紹了手機端用rem+scss做適配的詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-15
這篇文章主要介紹了移動端適配 使px自動轉(zhuǎn)換rem的相關(guān)資料,需要的朋友可以參考下2019-08-26
