vue3.0中使用postcss-pxtorem

postcss-pxtorem是PostCSS的外掛，用於將畫素單元生成rem單位。

前端開發還原設計稿的重要性毋庸置疑，目前應用的單位最多還是rem,然而每次在製作過程中需要自己計算rem值，為了能夠直接按照設計圖的尺寸開發，並且能自動編譯轉換成rem，下面就來分享下postcss-pxtorem的使用。

1.安裝依賴

npm install postcss-pxtorem -D

2.設定規則（更改postcss.config.js,該檔案為使用vue-cli3自動建立的檔案）

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 16,//結果為：設計稿元素尺寸/16，比如元素寬320px,最終頁面會換算成 20rem
      propList: ['*']
    }
  }
}

操作到這裡移動端自動適配了嗎，當然不能，目前只是將px單位轉換成rem,移動端適配還差最後一步,初接觸rem理解起來有點懵，後來發現了一個好理解的方法，下面來分享一下。

現在我們作一個實驗，你可以新建一個網頁，並寫入如下程式碼：

<div class="test">
    <p class="hello">Hello</p>
</div>

然後給html一個基本的樣式:

.test{
    width:320px;
    height:160px;
    background-color: bisque;
    text-align: center；
}
.hello{
    color:red;
}

上邊我們使用了還是傳統的使用px作為單位，我們在移動端除錯模式iphone5環境檢視一下。會發現div的寬度是正好的，我們再檢視一下字型，發現大小是16px。
我們現在可以把CSS中的px單位換成rem單位來進行測試。因為html根元素的字型大小是16px，那麼換成rem單位，直接除以16就好。

.test{
    width:20rem;
    height:10rem;
    background-color: bisque;
    text-align: center；
}
.hello{
    color:red;
    font-size:1rem;
}

明白了REM的原理後，我們就可以使用這個特點來進行適應佈局了，這也是現在比較主流的移動端web適配方案。src目錄下，新建 libs/rem.js 輸入如下程式碼

// 設定 rem 函式
function setRem () {

    // 320 預設大小16px; 320px = 20rem ;每個元素px基礎上/16
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
//設定根元素字型大小
    htmlDom.style.fontSize= htmlWidth/20 + 'px';
}
// 初始化
setRem();
// 改變視窗大小時重新設定 rem
window.onresize = function () {
    setRem()
}

在main.js中引入rem.js

import './libs/rem.js';

最後重新整理頁面看下，就會發現原本用px的單位已經自動換算成了rem;