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

2019-08-19 5,313 阅读1分钟

vue-cli3 项目中单位是px的情况下，设置根字体，达到rem布局的效果：

下载 cnpm install postcss-px2rem-exclude -S
在package.json文件中写入如下代码：

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

创建一个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()

将resetFont.js文件引入到main.js当中：

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

这样我们在vue-cli3项目中就可以使用rem布局，且单位是px的单位