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

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

編寫一個任務(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（吞下目標（“dir”）}）

為什么很多web項目還是使用px，而不是rem？

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

后來，出現(xiàn)了大眾和VH。漸漸地，許多項目使用大眾汽車進行改編。100vw=100%寬度。因為兼容性不是很好，所以一直沒有上線。

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

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

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

postssloader:（）=>{

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

`模塊.exports={

插件：[

require（“postss-px2rem”）（）

]}`