位置: IT常识 - 正文

vue项目实现pc端和手机端屏幕自适应(vue开发pc前端网站)

编辑：rootadmin

vue项目实现pc端和手机端屏幕自适应 1.安装flexible插件yarn add lib-flexible -S

推荐整理分享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 vue项目实现pc端和手机端屏幕自适应(vue开发pc前端网站)

下载将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一样

本文链接地址:https://www.jiuchutong.com/zhishi/283908.html 转载请保留说明！

上一篇：BLINK AC1200U路由器怎么开启访客模式(ac1203路由器)

下一篇：显示器有必要买4k高分辨率吗？高分辨显示器值得(显示器有必要买240hz吗)