"postcss-px2rem-exclude"插件的使用

vue-cli3 項目中單位是px的狀況下，設置根字體，達到rem佈局的效果：

1. 下載 cnpm install postcss-px2rem-exclude -S
2. 在package.json文件中寫入以下代碼：

"postcss": {
        "plugins": {
            "autoprefixer": {},
            "postcss-px2rem-exclude": {
                "remUnit": 37.5,
                "exclude": "/node_modules/i"
            }
        }
    },
複製代碼

3. 建立一個resetFont.js設置跟字體

window.onresize = setHtmlFontSize
window.onload = setHtmlFontSize

function setHtmlFontSize() {
    const htmlWidth = document.documentElement.clientWidth || document.body.clinentWidth;
    const htmlDom = document.documentElement;
    htmlDom.style.fontSize = htmlWidth / 10 + "px"
}

setHtmlFontSize()
複製代碼

4. 將resetFont.js文件引入到main.js當中：

import "@/common/js/resetFont.js"

複製代碼

這樣咱們在vue-cli3項目中就可使用rem佈局，且單位是px的單位