"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的单位