移動端：UI圖px單位轉換rem單位的計算方法

簡單說一下 em

em 單位是相對於父元素字體大小來去定的。比方說：

font-size:12px;
    元素寬度是2em;
    那麼實際的寬度是 24px.(具體爲何，能夠去查詢資料，今天主講rem)

簡單說一下 rem

rem 是相對於根元素（html）字體大小來肯定的。比方說：

寬度            字體
    手機A： 320px            14px

    手機B： 460px             ?
    爲了能達到能夠同等比的放大縮小，那麼，能夠進行很簡單的運算：?=14*460/320
    獲得：？=20.125px;

UI圖上的px轉化成實際操做的rem計算方法

1. 第一步：設計標籤的基準值，隨意，想定多少定多少。隨意定：20px
2. 第二步：看看UI同事給你的圖，寬度是多少？通常UI給圖都是會給大一點，由於大圖切下來，當屏幕小點，不會失真，可是小圖要是放大了，就不太好看了。。。比方說，

一張圖 寬度749px 高度234px;  你的瀏覽器模擬器以iphone6來定基，也就是寬度爲375px;
    那麼根據等比例縮放，你的模擬器高度爲h=375*234/749=117.1562px
    那麼實際的rem的計算值爲：
    寬度：375/20 = 18.75rem
    高度: 117.1562/20 = 5.8578rem;

1. 第三步： 開始進行換算。實際是不一樣屏幕寬度，只要變換根元素的font-size,便可調整全部的元素寬高顯示。而這個，只能經過js來實現

基準屏幕               真實屏幕
    寬度          375px               clientWidth
            
    字體          20px                ?


    js代碼：
    window.onload = function(){
        document.documentElement.style.fontSize = 20*document.documentElement.clientWidth/375 + 'px'
    }

1. 第四步：檢驗你的頁面。

題外話

如今有不少能夠直接計算rem值的插件，不用你每次寬高都去算一下，否則那樣是會活不下去的。具體實現能夠看這篇文章https://www.cnblogs.com/jf-67/p/7171830.html