龙空技术网

vuecli3如何实现PC端分辨率适配

武汉新城大雄 67

前言:

当前大家对“js适配分辨率”都比较着重,看官们都需要剖析一些“js适配分辨率”的相关知识。那么小编在网上收集了一些关于“js适配分辨率””的相关资讯,希望看官们能喜欢,同学们快快来了解一下吧!

pc端分辨率很多种,而设计图一般都是1920的,做媒体查询太过麻烦那怎么做呢?

以下就是最新简单可操作性方法:

1.安装需要响应的包

npm i lib-flexible -S

2.安装第二个包

npm i px2rem-loader -D

3.安装好了之后全局引入包,在main.js中添加如下代码

import 'lib-flexible'

4.在vue.config.js中添加如下代码

css: { loaderOptions: {

postcss: { plugins: [ require('postcss-px2rem')({ remUnit: 192 }) ] } },},

5.修改lib-flexible.js,

为什么要改,你会发现一个问题,移动端没问题,但是pc端他的大小只适配到540,

所以在安装包里找到 lib-flexible,包中的lib-flexible.js文件,

其中修改如下代码

没改之前

修改之后

6.改完之后如何在项目中同步更新呢?

接下来把这个文件复制出来,放到lib文件下

然后在main.js中

把import 'lib-flexible'改成import './lib/lib-flexible/flexible',

知识在线,共同探讨,一起搬砖,快乐生活,苦了头发。

喜欢我就关注我吧!喜欢我就关注我吧!喜欢我就关注我

标签: #js适配分辨率