大家知道rem可以用來做響應式佈局，只是html元素上的font-size樣式需要根據螢幕寬度來指定。

之前有用@media媒體查詢，根據各種螢幕寬度寫html的樣式，也用過類似lib-flexible這樣的js庫動態改變html樣式，總覺得挺麻煩的。

今天突然想到vw這個單位，發現用它來做響應式佈局實在太方便了。

只需一行css：

html {  font-size: 26.66667vw !important; }

螢幕標準寬375px，全部寬度是100vw，即：

100vw / 375px = 0.2666667 vw/px

也就是每畫素0.2666667vw。為除錯時便於換算，我們設定1rem = 100px, 即 1rem = 26.66667vw。這個值也可根據自己需要調整數值。

然後，我們再樣式中，就可以直接用rem了，做出來就是響應式佈局。

當然如果你還想再方便點，也可以在css程式碼裡直接用px做單位，然後使用postcss-pxtorem這個工具在webpack構建時將px轉為rem單位。這樣寫程式碼時照著UI圖的標註直接寫畫素值就行了。配置如下：

{
        loader: 'postcss-loader',
        options: {
            plugins: [
                require('postcss-pxtorem')({rootValue: 100, propList: ['*']})
            ]
        }
    }
 

這個 rootValue: 100值，就是對應上面的換算關係。如果你要調整的話，這裡要一併調整。

具體實現的完整程式碼請參考：https://github.com/hzsrc/vue-element-ui-scaffold-webpack4