rem和em相對單位長度我們經常用在響應式開發中，rem 和 em 單位是由瀏覽器基於你的設計中的字型大小計算得到的畫素值。em 單位基於使用他們的元素的字型大小。rem 單位基於 html 元素的字型大小。em 單位可能受任何繼承的父元素字型大小影響。rem 單位可以從瀏覽器字型設定中繼承字型大小。

一般我們會使用js去控制根元素的font-size大小，然後進行rem換算：

function intiSize(){
    //獲取當前瀏覽器視窗寬度(這裡的實質就是body寬度)
    var win_w=document.body.offsetWidth;
    //定義變數
    var fontSize;
    if(win_w>640){
        fontSize=24;
    }else{
        //如果瀏覽器視窗寬度(這裡的實質就是body寬度)值小於320，取320
        win_w=Math.max(320,win_w);
        fontSize=win_w/320*12
    }
    //設定根元素的大小
    document.getElementsByTagName('html')[0].style.fontSize=fontSize+'px';
}
//瀏覽器視窗寬度發生變化時條用這個函式，方便與改變視窗大小時候除錯
onresize=intiSize;
intiSize();
 

問題：純js控制會一個頁面載入時候，知道載入完畢會出現由大變小的問題，這個是因為先載入頁面然後再載入js，當沒載入完這段js，函式沒被呼叫，會出現很大字型或者圖片很大，等JS載入完畢後，瞬間變回正常，這樣會影響使用者體驗，這裡有兩個解決方法

解決辦法：一、像淘寶移動端那樣，頁面沒載入完畢前顯示一個loading頁面，載入完畢後再顯示內容。

                 二、把加入一個css媒體查詢樣式表，頁面先載入樣式再載入內容，用css樣式表去控制你的頁面佈局和js精確控制的佈局偏差儘量降低到最小，這樣載入完時候因為微小偏差的還原到精確的佈局，這時候發生的變化非常微小（只有一個px左右的偏差）肉眼很難以看出（親測實用），下面我貼出平時實用的css樣式表，兩張混合實用，移動端佈局的問題得以完美的解決。