理解rem實現響應式布局原理及js動態計算rem

前言

　　移動端布局中，童鞋們會使用到rem作為css單位進行不同手機屏幕大小上的適配。那么來講講rem在其中起的作用和如何動態設置rem的值。

1、什么是rem

　　rem是相對於根元素（html標簽）的字體大小的單位。

2、rem實現適配的原理

　　核心思想：百分比布局可實現響應式布局，而rem相當於百分比布局。

　　實現手段：動態獲取當前視口寬度width，除以一個固定的數n，得到rem的值。表達式為rem = width / n。

　　通過此方法，rem大小始終為width的n等分。

3、如何動態計算rem

　　核心代碼塊：

        // 動態為根元素設置字體大小
        function init () {
　　　　　　// 獲取屏幕寬度
          var width = document.documentElement.clientWidth
　　　　　　// 設置根元素字體大小。此時為寬的10等分
          document.documentElement.style.fontSize = width / 10 + 'px'
        }

　　　　 //
　　　　 首次加載應用，設置一次
        init()
        // 監聽手機旋轉的事件的時機，重新設置
        window.addEventListener('orientationchange', init)
        // 監聽手機窗口變化，重新設置
        window.addEventListener('resize', init)

　　理解：上面代碼實現了，無論設備可視窗口如何變化，始終設置rem為width的1/10.即實現了百分比布局
4、tip：

　　1、以上代碼需在dom之前寫入（可放在head里面第一個script標簽）

　　2、移動端加上meta標簽<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5、使用體驗：
　　我在項目中沒有使用flexible.js等此類動態計算rem的插件。另外說明一點，此方法實現的功能也相對簡單，只實現了最核心的動態修改rem的值。