1.安装flexible插件
yarn add lib-flexible -S下载淘宝的flexible插件，-S为产生依赖
2.安装px自动转换成rem的插件
yarn add px2rem-loader -D下载将px转换成rem的插件，这样在谢的时候就可以根据设计稿直接使用，这个插件会自动帮我们转换成rem
3.在main.js中引入lib-flexible插件
4.在vue.config.js中添加配置
module.exports = {
chainWebpack: config => {
config.module
.rule("css")
.test(/\.css$/)
.oneOf("vue")
.resourceQuery(/\?vue/)
.use("px2rem")
.loader("px2rem-loader")
.options({
remUnit: 192 // 设计稿大小比例 / 10
});
},
}5.修改flexible.js文件，在node_modules依赖包里面
将原本的540px替换成width，这样就实现了根据屏幕大小自动适配了文章来源：https://www.toymoban.com/news/detail-465974.html
6.设置完成后重启项目就可以了~
如果你使用的是 scss 那么就用amfe-flexible,安装方法和lib-flexble一样文章来源地址https://www.toymoban.com/news/detail-465974.html
到了这里，关于vue项目实现pc端和手机端屏幕自适应的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
