一行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-...