pc端rem适配_vuecli3如何实现PC端分辨率适配

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

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

1.安装需要响应的包

npm i lib-flexible -S

2.安装第二个包

npm i px2rem-loader -D

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

import 'lib-flexible'

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

1. css: {
2. loaderOptions: {
4. postcss: {
5. plugins: [
6. require('postcss-px2rem')({
7. remUnit: 192
8. })
9. ]
10. }
11. },
12. },

5.修改lib-flexible.js，

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

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

其中修改如下代码

没改之前

修改之后

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

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

然后在main.js中

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

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

喜欢我就关注我吧！喜欢我就关注我吧！喜欢我就关注我