你還在用rem彈性佈局嗎？在html檔案頭部放入一大段壓縮過的js程式碼，是不是讓你很難受？來了解下vw吧，能讓你的程式碼更純粹

簡單介紹下rem佈局方案

rem是css中的長度單位，1rem=根元素html的font-size值。當頁面中所有元素都使用rem單位時，你只需要改變根元素font-size值，所有元素就會按比例放大或者縮小。因此我們只需要寫一小段js程式碼，根據螢幕寬度改變html的font-size值，就可以做到彈性佈局。這種方法確實便捷，相容性也很好，是目前非常主流的彈性佈局方案。但這種方案有弊端（弊端之一：和根元素font-size值強耦合，系統字型放大或縮小時，會導致佈局錯亂；弊端之二：html檔案頭部需插入一段js程式碼 ），本文將介紹一種更優秀純粹的方案。

vw單位實現彈性佈局

我們先來看看這vw vh單位 w3c的官方解釋
vw：1% of viewport’s width
vh：1% of viewport’s height

viewport即瀏覽器可視區域大小
我們可以這樣理解 100vw = window.innerwidth, 100vh = window.innerheight
在移動端我們一般都可以認為，100vw就是螢幕寬度。若使用vw佈局，就不需要再像rem那樣，在js中去動態設定根元素的font-size了，sass中只需要使用這個函式做轉換即可

//以iphone7尺寸@2x 750畫素寬的視覺稿為例
@function
 
 vw($px) {
    @return ($px / 750) * 100vw;
}

//假設一個div元素在視覺稿中，寬度為120px，字型大小為12px
div {
    width: vw(120);
    font-size: vw(12);
}

vw單位和百分比%單位對比

那麼100vw和我們平時用的width:100%有什麼區別呢？

1. 百分比%是根據父元素寬度或者高度進行計算，而vw vh固定按照viewport來計算，不會受父元素寬高度影響。
2. 100vw包括了頁面滾動條寬度（頁面滾動條屬於viewport範圍內，100vw當然包括了頁面滾動條寬度）。但把body或者html設定為width:100%時，是不包括頁面滾動條的寬度的。也就是說100vw在有縱向滾動條的情況下，會比100%寬。 那麼就會引發一個問題：pc端使用vw單位時，如果頁面內容超出一屏長度，出現了縱向滾動條，同時有元素width:100vw， 則會導致出現條橫向滾動條，因為元素（100vw + 滾動條寬度）超出了viewport寬度。（移動端滾動條不佔位，所以不會有這個問題）不過pc端一般不需要彈性佈局，還是儘量使用width:100%更保險。

為何rem佈局比vw主流？相容性

既然rem佈局有弊端，與font-size強耦合會引發副作用，vw佈局相較之下更純粹程式碼邏輯也更清晰，為何移動端rem佈局比vw主流？我們來看看vw和rem的相容性。


相較之下，vw單位相容性比rem稍差，ios8、安卓4.4及以上才完全支援。這也是為什麼之前rem佈局一直更流行的原因。

總結

目前ios8、安卓4.4以下的使用者已經非常少了，caniuse上面顯示，在中國這部分使用者只有1.2%，比例已經非常低了，而這部分使用者的手機估計只會打打電話不會使用網際網路的（還是需根據各自產品的使用者資料分析來決定是否使用vw）。如果你的頁面只適用於微信、qq，那絕對能放心使用vw單位，還可以配合vh針對一些特殊比例螢幕做處理，徹底擺脫使用rem帶來的副作用，刪掉html頭部計算font-size的那段js程式碼，讓你的程式碼更純粹。