@vue/cli 实现pc端分辨率适配(可用于大屏开发)

参考文章: https://blog.csdn.net/weixin_41257563/article/details/97266234

项目框架: 项目是基于vue-cli3生成的工程化项目

vue create projectName

依赖:
1.自适应方案核心： 阿里可伸缩布局方案 lib-flexible
2.px转rem：px2rem，它有webpack的loader: px2rem-loader

一.安装

yarn add lib-flexible -S

yarn add px2rem-loader -D

二.lib-flexible使用
在入口文件 main.js 里引入 lib-flexible

// main.js
import 'lib-flexible'

通过以上步骤引入lib-flexible之后, 项目中就可以使用rem了, 实现了可伸缩布局。

但是在实际开发中，我们通过设计稿得到的单位是px，所以要将px转为rem放入样式中。但如果都需要手动转的话，就很麻烦，所以需要一个工具替我们完成这项工作，这个时候就需要配置px2rem了。

三.px2rem-loader使用
在vue.config.js中配置webpack依赖, px2rem-loader 的 remUnit通常设置成设计稿的1/10即可, 假设设计稿是1280px, 则可以设置remUnit为128, 代表1rem = 多少像素; remPrecision 参数表示换算的rem保留几位小数点

// vue.config.js
 chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .use('px2rem-loader')
      .loader('px2rem-loader')
      .options({
        remUnit: 128
        remPrecision: 8
      })
      .end()
  }

但是有一个问题，我明明设置的宽度是按1280px来的，为什么计算出来1rem=54px?

这是因为lib-flexible依赖的文件中当宽度540px时, 把宽度定死为540px, 我们需要把它改成自动获取宽度即可.

// node_modules/lib-flexible/flexible.js 找到对应文件
 function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            // width = 540 * dpr;// 获取屏幕宽度, 当屏幕大于540时,这里写死了540,只需要改成获取当屏幕宽度即可
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

重启项目可效果:

配置好后, 不管是移动端还是pc端还是大屏开发都可以轻松应对~
完结撒花🎉

---

说个题外话, 根据上面配置好了之后, 在页面中可以直接按照设计图来写样式, 不需要进行任何换算, 但不知道会不会也有同学和我一样会想它到底是如何计算的呢? 反正我是想了很久, 下面是我的理解:

1. 项目中设置box的宽度为1280px, 且remUnit为128
   .box{
   width:1280px
   }
2. 在浏览器中, px2rem将px自动转成rem, 计算方法如下:
   .box的宽度转成rem= 1280px/128= 10rem
3. 而html根元素的字体大小由lib-flexible控制, 如果此时为 font-size:100px
   那么box的实际宽度=100px*10rem=1000px
4. 那么lib-flexible是又是如何根据屏幕宽度设置根元素的字体大小呢?
   
   上图可以看出根元素的字体=当前屏幕宽度/10 =1rem
   看到这里, 相信大家的疑惑应该解开了
   不足的地方望大家指正~

---

2021.3.16更新

px2rem-loader有时候会出问题，未实现px自动转rem或者不能将vant中的px转成rem，可以试试postcss-pxtorem
使用步骤：
1.安装postcss-pxtorem
2.在根文件目录下建postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

3.重启项目即可

注意

报错：Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8
解决方案：降低postcss-pxtorem版本，可以试试yarn add postcss-pxtorem@4.0.1