移動 web 端螢幕適配 – rem

hileix發表於2019-02-16
WebREM

前言

最近整理了一下以前學習前端的筆記，發現自己對移動 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;
    // 設定 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 的大小。即：在任何尺寸的螢幕上，只要給元素設定值相同的 rem，則在所有尺寸的螢幕上該元素所佔螢幕寬度的比例是一樣的，所佔比例一樣，就適配了所有尺寸的螢幕。

less 程式碼

現在只需要將設計稿中元素的 px 單位轉換為 rem 單位。

所以，這個時候，我們可以把設計稿也當成一個具有一定尺寸的手機螢幕。
在我這個例子中，設計稿的寬度為 750px。

所以，750/15 = 50px，即在設計稿這樣尺寸的手機螢幕中，1rem = 50px。

然後，在 less 程式碼中，我們定義一個變數 @r。
量得 div 的寬度為 100px，因為在設計稿這樣尺寸的螢幕中，1rem = 50px，所以該 div 的 rem 的值為：100/50 rem，即 100/@r。
量得 div 的高度為 200px，因為在設計稿這樣尺寸的螢幕中，1rem = 50px，所以該 div 的 rem 的值為：200/50 rem，即 200/@r。

相關文章