了解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的值。