rem、px、em(手機端h5頁面屏幕適配的幾種方法)

px

px像素（pixel）：相對長度單位。相對於顯示器屏幕分辨率而言。pc端使用px倒也無所謂，但是在移動端，由於手機分辨率種類頗多，不可能一個個去適配，這時px就顯得很是無力，因此就要考慮em和rem。

em

 

相對於父節點的font-size，會有一些組合的問題。好比你把body的font-size定義爲50%，通常地會是8px。那麼你在body裏字體大小就是1em=8px了。可當你定義了一個div，而後把字體設置成了75%，請問，如今的1em等於多少？這個時候你會發現，原來他繼承了body的值，如今字體更小了，變成了6px！由於em是相對於父節點的單位。這麼嵌套下去你會哭......(幸虧出現了rem╭(′▽`)╭(′▽`)╯)

 

rem

 

相對長度單位，指相對於根元素的字體大小的單位。rem只會相對html的值，不會受到父級的影響，這樣的好處在於：從em裏的例子來說，1rem始終會等於8px。使用的時候不須要從新計算rem此時的大小。rem由於是css3增長的，因此ie8或如下請無視。

 

屏幕適配的幾種方法（流式佈局、固定寬度、響應式、經過viewport進行縮放、使用rem）

流式佈局：

         在頁面佈局的時候都是經過百分比來定義寬度，可是高度大都是用px來固定住，因此在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，可是高度仍是和原來同樣，實際顯示很是的不協調，這就是流式佈局的最致命的缺點，每每只有幾個尺寸的手機下看到的效果是使人滿意的，其實不少視覺設計師應該沒法接受這種效果，由於他們的設計圖在大屏幕手機下看到的效果至關因而被橫向拉長來同樣。 流式佈局並非最理想的實現方式，經過大量的百分比佈局，會常常出現許多兼容性的問題，還有就是對設計有不少的限制，由於他們在設計之初就須要考慮流式佈局對元素形成的影響，只能設計橫向拉伸的元素佈局，設計的時候存在不少侷限性。

 

固定寬度：

       把頁面設置成320的寬度，超出部分留白，這樣作視覺，前端設計都挺挺開心，UI不再用被流式佈局限制本身的設計靈感了，前端也不用流式佈局。可是這種解決方案也是存在一些問題，例如在大屏幕手機下兩邊是留白的，還有一個就是大屏幕手機下看起來頁面會特別小，操做的按鈕也很小

。

響應式：

響應式這種方式在國內不多有大型企業的複雜性的網站在移動端用這種方法去作，主要緣由是工做大，維護性

難，因此通常都是中小型的門戶或者博客類站點會採用響應式的方法從web page到web app直接一步到位，由於這樣

反而能夠節約成本，不用再專門爲本身的網站作一個web app的版本。

 

經過viewport進行縮放：

  以320寬度爲基準，進行縮放，最大縮放爲320*1.3 = 416，基本縮放到416都就能夠兼容iphone6 plus的屏幕了，這個方法簡單粗暴，又高效。說實話我以爲他和用接下去咱們要講的rem都很是高效，不過有部分同窗使用過程當中反應縮放會致使有些頁面元素會糊的狀況。

 

rem等比例適配全部屏幕：

(function(){
    var currClientWidth,
        fontValue,
        originWidth;
    originWidth = 750;//ui設計稿的寬度，通常750或640
    __resize();

    window.addEventListener('resize', __resize, false);

    function __resize() {
        currClientWidth = document.documentElement.clientWidth;
        if (currClientWidth > 768){
            currClientWidth = 768;
        } 
        if (currClientWidth < 320){
            currClientWidth = 320;
        } 
        fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);
        document.documentElement.style.fontSize = fontValue + '%';
    }
})();
// 當前假如當前分辨率是375， 設計稿分辨率是750
// 750/375=0.5
// 比例關係是0.5倍
// 再算一下你要換算1rem等於多少px，
// 假如我要100， 100/16=6.25
// 把這個換算的乘以剛纔得出的比例
// 0.5*625=312.5
// 最後還拼接了一個百分號 = 312.5%
// 就是在375分辨率下 1rem = 312.5%
// 312.5% * 16px = 50px

     經過js來判斷當前屏幕大小，進而設置html的font-size.代碼裏面rem的值就是Ui設計稿上量的px除以100就是你代碼中要寫的rem值。