移動端web開發，到底用em，rem，仍是靜悄悄的vw？

移動端彈性佈局中，字號單位、以及包裹文字的元素寬高單位，究竟是用em，rem仍是vw？

先說vw和他的兄弟，vh，vmin，vmax。

1vw ＝ 1/100th viewport width

相對於視口的寬度。視口被均分爲100單位的vw。

簡單來講，若是可視區寬度爲300px，高度爲200px，那麼1vw = 3px，1vh = 2px，1vmin = 2px， 1vmax = 3px。

那麼我能用它來解決什麼問題？

好比彈出層相對於可視區的左右和垂直居中。

.div1{
    background-color: red;
    width: 60vw; height: 60vh; 
    margin: 20vh auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

好比標題文字和圖片的等比縮放。

在網上抄了一個vm和rem搭配使用的@media，期待有項目讓我體驗下這其中的酸爽。

html {
    font-size: 16px;
}

@media screen and (min-width: 375px) {
    html {
        /* iPhone6的375px尺寸做爲16px基準，414px正好18px大小, 600 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 414px-1000px每100像素寬字體增長1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 600px) {
    html {
        /* 600px-1000px每100像素寬字體增長1px(20px-24px) */
        font-size: calc(125% + 4 * (100vw - 600px) / 400);
        font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 1000px日後是每100像素0.5px增長 */
        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
}

 

vw目前兼容性還不夠，還有一些瀏覽器的舊版本不支持。截止到2017.4.2的兼容狀況：戳我查看兼容can i use

再看不兼容的瀏覽器的市場佔有率，其中UC在中國佔了7.38%，這個數字不小。

可是誰知道呢，隨着瀏覽器的舊版本被掃進歷史垃圾堆，vw的前途也許會愈來愈光明。

 

那麼到底用哪一個設計單位？

我的認爲，要根據所在團隊的項目佈局狀況，來選擇是否用em仍是rem仍是vw。

好比咱們單位項目一直使用em做爲單位，再@import媒體查詢來實現移動端web的自適應佈局。

通常來說，不少教程是這樣定製em的。（但他們沒有告訴你，chrome瀏覽器最小字號爲12px，因此就算設置了10px，也只會按12px來算。因此我打算加了第二行來試試看。）

body{
     font-size: 10px;
     -webkit-transform:scale(0.83); //chrome瀏覽器重置最小字號限制，慎用！用起來有點麻煩~body這個元素的寬度也跟着縮放。因此最好是在某些特殊場合須要的時候用。
}

既然10px有各類各樣的問題，那不如設置成20px。反正都是爲了方便計算。

嗯，這樣咱們的1em = 20px。假設有一個div，它的父元素就是body，設置了width = 20em, height = 20em。因而咱們有了一個div，寬*高 = 400*400px。

假設咱們給div設置了font-size:12px; 那麼，它的子元素的1em 就變成了 12px。

固然，這種仍是要根據團隊項目來肯定。好比咱們單位是這樣的：

body {
    font: 24px/1.5 "Microsoft YaHei";
}

那我若是某天增長其中一個模塊的時候，按照font: 20px來寫，那確定會引發混亂。(這事真發生過，不過不是我乾的。我只是改得比較煩躁的那個。不禁想起一句話：若是你的代碼只以經過測試樣例爲目標，總有人會所以啼笑皆非。)

整體來講，配合如下的媒體查詢，在不須要改變結構的時候，em仍是比較好用的。

@media (min-device-width:377px) and (max-device-width:385px) {
    
    body{font:12px/1.5 "Microsoft Yahei";}
}

@media screen and (max-device-width:320px){
    body{font:12px/1.5 "Microsoft Yahei";}

    }
/*6*/
@media (min-device-width:320px) and (max-device-width:375px) {
    
    body{font:12px/1.5 "Microsoft Yahei";}
    
}
@media (min-device-width:375px) and (max-device-width:376px) {
    
    body{font:14px/1.5 "Microsoft Yahei";}
    
}

/*6+*/
@media (min-device-width:386px) and (max-device-width:400px) {
    
    body{font:13px/1.5 "Microsoft Yahei";}

}
@media (min-device-width:401px) and (max-device-width:640px) {
    body{font:15px/1.5 "Microsoft Yahei";}    
}

/* @media screen and (min-device-width:481px){} */
/*4 4s*/
/*@media only screen and (device-height:480px) and (-webkit-device-pixel-ratio:2){}*/

/* 5 */
/* @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){} */

/* 1222*/
@media only screen and (min-device-width:1079px) and (-webkit-min-device-pixel-ratio:2.5){
    
    body{font:13px/1.5 "Microsoft Yahei";}}

下面來講說rem。rem這傢伙參照html根元素來肯定自身大小，不管處在哪一個位置，初心不變。

font size of the root element.

能夠看出：1rem=1*html元素的font-size。可配合媒介查詢或者js動態計算來控制html根元素的font-size。

可是，這麼方便的rem，依然有一些缺點。

被濫用的REM：

1. 基於REM的CSS在Android4.4及5.0部分機型出現佈局錯亂。好比一行字變成兩行。
2. 雪碧圖背景的坑，圖標可能會出現錯位。
3. 讓用戶感到溫馨的閱讀體驗，是由於手持設備屏幕大小而改變的字號和可能模糊毛糙的字體，仍是清晰的文字、加載流暢的圖片和視頻？當一個用戶拿着plus這些大塊頭手機時，他真的是由於喜歡更大號的字嗎。
4. ie8如下不支持rem。（是否考慮ie8用戶的體驗？我的見解，具體問題具體分析。好比，根據產品的目標用戶來決定投入。好比IE8的市場份額，IE8在您的目標人羣中的佔比。）

因此，如今很常見的處理辦法，文字用em，須要縮放的邊界寬高用rem。

還能夠參考淘寶這些常見移動端的源碼。淘寶提供的開源的解決方案：https://github.com/amfe/lib-flexible

這裏給使用iPhone的用戶推薦一款小東西，叫View Source，能夠用來查看網頁源代碼：html，css，javascript。