大家知道rem可以用來做響應(yīng)式布局，只是html元素上的font-size樣式需要根據(jù)屏幕寬度來指定。

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

今天突然想到vw這個單位，發(fā)現(xiàn)用它來做響應(yīng)式布局實(shí)在太方便了。

只需一行css：

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

屏幕標(biāo)準(zhǔn)寬375px，全部寬度是100vw，即：

100vw / 375px = 0.2666667 vw/px

也就是每像素0.2666667vw。為調(diào)試時便于換算，我們設(shè)定1rem = 100px, 即 1rem = 26.66667vw。這個值也可根據(jù)自己需要調(diào)整數(shù)值。

然后，我們再樣式中，就可以直接用rem了，做出來就是響應(yīng)式布局。

當(dāng)然如果你還想再方便點(diǎn)，也可以在css代碼里直接用px做單位，然后使用postcss-pxtorem這個工具在webpack構(gòu)建時將px轉(zhuǎn)為rem單位。這樣寫代碼時照著UI圖的標(biāo)注直接寫像素值就行了。配置如下：

{

loader:'postcss-loader',

options: {

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

]

}

}

這個 rootValue: 100值，就是對應(yīng)上面的換算關(guān)系。如果你要調(diào)整的話，這里要一并調(diào)整。

總結(jié)

以上是生活随笔為你收集整理的vw 前端_一行css代码轻松实现前端响应式布局（vw+rem）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。