移動 web 端屏幕適配 - rem

前言

最近整理了一下之前學習前端的筆記，發現本身對移動 web 端屏幕適配（rem）這一塊並無真正理解，只是會用。
接下來，把本身的一些對移動 web 端屏幕適配（rem）的思考記錄下來。javascript

rem 介紹

rem 表示根元素（<html>）的 font-size 的大小。即若是根元素的 font-size 大小爲 14px，則 1rem = 14pxhtml

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，則在全部尺寸的屏幕上該元素所佔屏幕寬度的比例是同樣的，所佔比例同樣，就適配了全部尺寸的屏幕。java

less 代碼

如今只須要將設計稿中元素的 px 單位轉換爲 rem 單位。web

因此，這個時候，咱們能夠把設計稿也當成一個具備必定尺寸的手機屏幕。
在我這個例子中，設計稿的寬度爲 750px。less

因此，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。設計