一行css代碼輕松實現前端響應式布局（vw+rem）

大家知道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