postcss-pxtorem是PostCSS的插件吁系，用于將像素單元生成rem單位。
前端開發(fā)還原設(shè)計(jì)稿的重要性毋庸置疑，目前應(yīng)用的單位最多還是rem,然而每次在制作過程中需要自己計(jì)算rem值，為了能夠直接按照設(shè)計(jì)圖的尺寸開發(fā)阵苇，并且能自動編譯轉(zhuǎn)換成rem，下面就來分享下postcss-pxtorem的使用感论。
1.安裝依賴
npm install postcss-pxtorem -D
2.設(shè)置規(guī)則（更改postcss.config.js,該文件為使用vue-cli3自動創(chuàng)建的文件）
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 16,//結(jié)果為：設(shè)計(jì)稿元素尺寸/16绅项，比如元素寬320px,最終頁面會換算成 20rem
propList: ['*']
}
}
}
操作到這里移動端自動適配了嗎，當(dāng)然不能比肄，目前只是將px單位轉(zhuǎn)換成rem,移動端適配還差最后一步,初接觸rem理解起來有點(diǎn)懵快耿，后來發(fā)現(xiàn)了一個好理解的方法，下面來分享一下芳绩。
現(xiàn)在我們作一個實(shí)驗(yàn)掀亥，你可以新建一個網(wǎng)頁，并寫入如下代碼：
<div class="test">
<p class="hello">Hello</p>
</div>
然后給html一個基本的樣式:
.test{
width:320px;
height:160px;
background-color: bisque;
text-align: center妥色；
}
.hello{
color:red;
}
上邊我們使用了還是傳統(tǒng)的使用px作為單位搪花，我們在移動端調(diào)試模式iphone5環(huán)境查看一下。會發(fā)現(xiàn)div的寬度是正好的，我們再查看一下字體撮竿，發(fā)現(xiàn)大小是16px吮便。
我們現(xiàn)在可以把CSS中的px單位換成rem單位來進(jìn)行測試。因?yàn)閔tml根元素的字體大小是16px幢踏，那么換成rem單位髓需，直接除以16就好。
.test{
width:20rem;
height:10rem;
background-color: bisque;
text-align: center惑折；
}
.hello{
color:red;
font-size:1rem;
}
明白了REM的原理后授账，我們就可以使用這個特點(diǎn)來進(jìn)行適應(yīng)布局了，這也是現(xiàn)在比較主流的移動端web適配方案惨驶。src目錄下，新建 libs/rem.js 輸入如下代碼
// 設(shè)置 rem 函數(shù)
function setRem () {
// 320 默認(rèn)大小16px; 320px = 20rem ;每個元素px基礎(chǔ)上/16
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//設(shè)置根元素字體大小
htmlDom.style.fontSize= htmlWidth/20 + 'px';
}
// 初始化
setRem();
// 改變窗口大小時重新設(shè)置 rem
window.onresize = function () {
setRem()
}
在main.js中引入rem.js
import './libs/rem.js';
最后刷新頁面看下敛助，就會發(fā)現(xiàn)原本用px的單位已經(jīng)自動換算成了rem;
