Vue移动端适配方案

写在前面

• 现在的手机五花八门，造就了移动端窗口分辨率繁多的局面。
• 在不同分辨率的屏幕下保持与UI图一致的效果，就成了让前端不得不头疼的问题。
• 本文采取的适配方案：阿里推出的lib-flexible + rem适配方案。
• 大致思路：安装lib-flexible相关第三方插件，用于自动设置HTML根元素的基准值。我们写代码时，利用rem单位去书写样式。
• lib-flexible的GitHub

使用到的两个工具介绍

工具一：lib-flexible —— 用于自动设置 rem 基准值

• 1、安装

npm i -S amfe-flexible

很多文章还是使用的npm i lib-flexible -S，但是已经不被推荐，具体可看GitHub:

• 2、在main.js引入

import 'amfe-flexible'

• 3、看具体效果：我们在切换不同设备时，在右边的代码中可以看到html标签的font-size一直在改变。看到这样的效果就说明成功了。
  

在效果图中我们看到一个规律，就是font-size永远都是屏幕分辨率的十分之一。如下：

这也是lib-flexible规定的，具体可看源码第18行。如下：

工具二：postcss-pxtorem —— 是一款 postcss 插件，用于将单位转化为 rem

使用了lib-flexible之后，我们的rem适配第一步已经完成了。第二部就是在写代码时使用rem单位，而不是我们熟悉的px单位。我们不能再使用px了，而是先将设计图的px单位根据相应的公式，转换成rem，最终将rem写在代码里。
设计图这么多的px单位最终要手动转成rem，是一个人都会被烦死。
所以：postcss-pxtorem出现了，他会手动将我们代码中的px单位自动转换成rem。
也就是说，设计图时多少px，我们在代码里就写多少px，postcss-pxtorem最终会将这个px转换成rem。
它是一个开发时依赖。

• 1、安装

npm install postcss-pxtorem -D

• 2、配置
  配置一：在项目的根目录下创建：postcss.config.js文件，并且添加如下配置：

plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }

rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换。

1、在上面就提到过，lib-flexible最终转换html元素的font-size是手机屏幕的十分之一，所以这个rootValue的值是根据我们的设计稿来设置的。
2、由于我的设计稿是通过iphone6做为原型设计的，宽度是375，所以在这里我rootValue的值为37.5。
3、如果你的设计稿宽度是750，那么rootValue的值为75。
4、如果你使用的UI库是Vant，那么这个rootValue的值就必须设置为37.5，因为 Vant 是基于逻辑像素 375 写的，所以如果你设置为 75 的话，Vant 的样式就小了一半。
5、如果设计稿就是750，我们在测量设计稿的时候都必须除2才能使用，否则就会变得很大。不想除就找UI把设计图变成0.5倍图，也就是宽为375。

propList：用来设定可以从 px 转为 rem 的属性，例如 * 就是所有属性都要转换，width 就是仅转换 width 属性，值一般为*。
配置二：browserslist：你会发现在 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
如果你是Vue CLI4.x创建的项目，找到packages.json，并将browserslist字段的配置修改如下：表示咱们的系统向下兼容到安卓4.0版本，IOS8版本。

如果你是Vue CLI3.x创建的项目，找将项目根目录下的.browserslistrc 文件修改如下：

• 3、配置结束后需要将项目npm run 重启一下即可生效。

• 4、怎么样判断是否生效：打开浏览器控制台，如果我们在代码中写的px都转换成rem了，表示成功。如下：
  

• 5、注意：在vue单文件中，包含在style内的px单位会自动转换成rem，但是行内样式中的px单位不会转换成rem。

效果

在不同设备下可以得到相同的效果，即rem适配成功。