Vue手机端和pc端适配问题

Vue手机和pc端适配问题

首先要用到postcss-pxtorem这个第三方，用npm安装下，我项目中用的是5.1.1版本，接下来我就用这个版本来做示范。安装好之后要在vue.config.js文件中做配置如下:
module.exports ={
css:{
loaderOptions:{
postcss: {
plugins: [
require(‘postcss-pxtorem’)({ //这里是配置项，详见官方文档
rootValue: 100, // 换算的基数
selectorBlackList: [‘weui’, ‘mu’], // 忽略转换正则匹配项
propList: [’*’],
}),
]
}
}
}
}
配置好之后在public文件夹下面的那个index.html文件中我做了点处理把如下js代码插入在head标签中间，写这个是为了计算不同页面的字体具体你的是多少要根据UI给你的设计图来计算做调整就行了

除了这个要注意 这个还没有使用，可以在你项目中的home.vue文件中的mounted方法中去调用setRem()方法这样他就会重新根据窗口去计算项目中的文字的大小了，这里要特别注意 css样式不要直接写在标签中 否则他不会自动由px转化成rem的一定要注意这点

都看到这了不点个赞再走吗？