Vue + amfe-flexible + postcss-px2rem-exclude实现移动端适配
vue版本 2.6.x
amfe-flexible 安装这个插件,可以实现 随着屏幕宽度大小,动态修改html 根节点 字体
postcss-px2rem-exclude 安装这个插件,可以将项目中px 单位修改为rem
// 第一步安装 lib-flexible
npm install amfe-flexible --save
// 第二步main.js 引入lib-flexible
import "amfe-flexible/index.js"
// 第三步安装 postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
// 第四步在vue.config.js中配置 postcss-px2rem-exclude
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
require('postcss-px2rem-exclude')({
remUnit: 75,
exclude: /node_modules|folder_name/i //引入的组件不进行单位转义
})
]
}
}
},
// 如果不想px 被转义 写样式时 后面加/*no */,就可以了
// 如:font-size: 32px; /*no */