移动端开发需要用到rem作为开发单位
第一步
npm install postcss-pxtorem --save-dev //安装postcss-pxtorem
第二步
npm i -S amfe-flexible
第三步
在main.js中引用
import 'amfe-flexible';
import 'amfe-flexible/index.js'//这个可以不用引入
第四步
在vue.config.js中进行配置
css: {
// css预设器配置项
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5,
// 忽略转换正则匹配项,插件会转化所有的样式的px。比如引入了三方UI,也会被转化.
//项目中有不需要自动转换成PX的样式,就在此添加,如: .vant 表示 .vant 开头的都不会转换
selectorBlackList: ['.tables'],
propList: ['*'], //属性的选择器,*表示通用
exclude: /douyin-weekend-activity/i,
}),
],
},
},
},
第五步
在index.html中引入
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
name="viewport"
/>