怎么快速將css中的px替換成rem？編寫一個(gè)任務(wù)，用gulp replace替換REM。var replace=require（“gulp replace”）吞咽任務(wù)（“pxToRem”，funct

怎么快速將css中的px替換成rem？

編寫一個(gè)任務(wù)，用gulp replace替換REM。var replace=require（“gulp replace”）吞咽任務(wù)（“pxToRem”，function（）{返回咕嚕咕嚕（“*.html”）.pipe（replace（/（d）px/g，function（match，p1）{return Number（p1）/10“rem”}））.pipe（吞下目標(biāo)（“dir”）}）

為什么很多web項(xiàng)目還是使用px，而不是rem？

在移動(dòng)終端剛剛流行的早期，為了適應(yīng)手機(jī)頁(yè)面到了不同大小的手機(jī)屏幕，淘寶網(wǎng)的一位前端老板寫了一個(gè)經(jīng)過改編的JS，叫做flexible，可以在GitHub找到。原理很簡(jiǎn)單。似乎根據(jù)手機(jī)的分辨率和DPI（我不記得了），動(dòng)態(tài)設(shè)置根元素HTML的fontsize，然后頁(yè)面元素的大小就是rem，因?yàn)?rem=fontsizeofhtml。

后來，出現(xiàn)了大眾和VH。漸漸地，許多項(xiàng)目使用大眾汽車進(jìn)行改編。100vw=100%寬度。因?yàn)榧嫒菪圆皇呛芎茫砸恢睕]有上線。

nodejs出現(xiàn)后，前端工程開始了。有pxtorem和pxtoview port等插件。在開發(fā)過程中，我們可以根據(jù)UI標(biāo)記的PX case直接編寫它們。在打包時(shí)，插件將幫助我們將PX計(jì)算轉(zhuǎn)換為REM或VW。

我現(xiàn)在用大眾。不考慮兼容性。我甚至不看那些需要與ie兼容的公司。[遮住你的臉

自從webpack2之后，PostSS插件的配置已經(jīng)改變了，webpack.config.js文件添加的文件插件：webpackConfig.plugins.push推送（新建）webpack.LoaderOptions插件（{選項(xiàng)：{

postssloader:（）=>{

返回[另一種寫入方式]它是創(chuàng)建一個(gè)新的根目錄postss.config.js文件文件，配置：

`模塊.exports={

插件：[

require（“postss-px2rem”）（）

]}`