位置: IT常识 - 正文
vue项目实现pc端和手机端屏幕自适应(vue开发pc前端网站)
编辑：rootadminvue项目实现pc端和手机端屏幕自适应 1.安装flexible插件yarn add lib-flexible -S
本文链接地址:https://www.jiuchutong.com/zhishi/283908.html
转载请保留说明！
推荐整理分享vue项目实现pc端和手机端屏幕自适应(vue开发pc前端网站)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue开发pc前端网站,vuepc端网页,vuepc端网页,用vue写的pc端网页,vue开发pc前端网站,vuepc端网页,vue做pc端,用vue写的pc端网页,内容如对您有帮助，希望把文章链接给更多的朋友！
下载淘宝的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，这样就实现了根据屏幕大小自动适配了
6.设置完成后重启项目就可以了~如果你使用的是 scss 那么就用amfe-flexible,安装方法和lib-flexble一样
上一篇：BLINK AC1200U路由器怎么开启访客模式(ac1203路由器)
下一篇：显示器有必要买4k高分辨率吗？高分辨显示器值得(显示器有必要买240hz吗)
![[JAVA]继承(java继承的基本概念)](https://www.jiuchutong.com/image/20231126/1700987037.jpg)