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，这样就实现了根据屏幕大小自动适配了

6.设置完成后重启项目就可以了~

如果你使用的是 scss 那么就用amfe-flexible,安装方法和lib-flexble一样

vue项目实现pc端和手机端屏幕自适应相关推荐

【工具】PC端调试手机端 Html 页面的工具
一.概述有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...
前端pc端、手机端适配基本知识
前端pc端.手机端适配问题一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
php自动识别pc和手机端并跳转,JS如何实现网站中PC端和手机端自动识别并跳转对应的代码...
1. 代码场景: 描述:在项目中,一般我们会使用响应式布局的方式或者借助bootstrap等插件来做响应式的网站.但是根据业务的需求,手机端可能会在功能上精简很多,我们也会写两套代码,分别用来实现P ...
跳出弹窗页面禁止滚动（PC端和手机端）
跳出弹窗页面禁止滚动(PC端和手机端) pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可 2.在弹窗的div上设置 @scroll ...
html手机pc不同页面,PC端和手机端如何同时生成静态页
静态页是和图片类似的静态资源,访问静态资源不会经过程序处理,不会根据浏览器返回不同页面.要同时支持PC端和手机端浏览器,且要生成静态页时,最好使用bootstrap之类的技术,实现自适应页面设计. 如 ...
[html] 制作一个页面时，需要兼容PC端和手机端，你是要分别做两个页面还是只做一个页面自适应？为什么？说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护个人简介 ...
JavaScript 代码判断：PC端和手机端
js代码· 示下: <script> if ((navigator.userAgent.match(/(phone|pad|pod|iPad|iPod|iPhone|ios|Android ...
html自动跳转手机端,用JavaScript实现网站自动跳转电脑PC端与手机端不同页面
前天,有一个网友希望在其微擎系统跳转的时候实现鉴别用户不同的客户端,比如电脑PC端和手机端,实现不同的页面跳转.对于之前老蒋有给其设置过PC端网站然后检测手机访问的时候跳转到WAP网站的案例,对于这个 ...
python如何判断web访问来源是PC端还是手机端
以下方法为判断web访问来源是PC端还是手机端 def judge_pc_or_mobile(ua):"""判断访问来源是pc端还是手机端:param ua: 访问来源头 ...

vue项目实现pc端和手机端屏幕自适应

1.安装flexible插件

2.安装px自动转换成rem的插件

3.在main.js中引入lib-flexible插件

4.在vue.config.js中添加配置

5.修改flexible.js文件，在node_modules依赖包里面

6.设置完成后重启项目就可以了~

vue项目实现pc端和手机端屏幕自适应相关推荐

最新文章

热门文章