web移动端REM适配

一、REM适配原理

rem是相对单位，rem是相对于HTML标签的字号计算结果，1rem = 1HTML字号大小。
那在不同尺寸的手机上给html的font-size设置不同的大小以保证所占比例一样来实现适配。

列如：在宽度375px的手机上设置font-size为37.5px，在750px的手机上设置font-size为75px，那么给div设置宽度为5rem时都占屏幕宽度的一半。

1. 通过媒体查询给不同宽度的设备设置基准值

/*
* 通常将基准值设置为宽度的1/10
*/
@media (width: 320px){
  html{
    font-size:32px
  }
}
@media (width: 375px){
  html{
    font-size:37.5px
  }
}

2. 使用flexible js设置基准值

媒体查询设置基准值，需要有对应的宽度才能进行设置，手机屏幕分辨率经常更新，不可能每个都适应到，一般项目中会使用flexible
在项目中直接引入即可

flexible会动态获取屏幕宽度，然后设置基准值

  // flexible代码
  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

3. 如何根据设计图填写rem值

根据设计图的尺寸设置一个变量根尺寸@rootSize，如果设计图是375px那么就是@rootSize: 37.5rem;如果设计图是750px的那么就是@rootSize: 75rem;
在设置宽度时，用量到的宽度/@rootSize 如：height: (160 / @rootSize);

在VUE项目中进行rem适配

使用vue开发移动端项目的时候，默认一般都是px作为单位，如果要使用rem单位，可以使用以下两个插件将px转换为rem

postcss-pxtorem 用于将px单位转化为rem
用于设置rem基准值

1.使用lib-flexible设置rem基准值（html 标签的font-size）

安装依赖：

# yarn add amfe-flexible
npm i amfe-flexible

在mian.js中加载该模块

import 'amfe-flexible'

这时候切换不同设备尺寸的，可以看到html标签上font-size的变化

2.使用postcss-pxtorem 将px转为rem

安装依赖：

# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D

在项目根目录创建postcss.config.js文件

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5, # 表示根元素字体大小，它会根据根元素大小进行单位转换
      propList: ['*'] # 用来设定可以从 px 转为 rem 的属性
      # * 就是所有属性都要转换，width 就是仅转换 width 属性
    }
  }
}

重新启动服务，就可以看到css样式中的px单位都变成了rem单位

行内样式不会生效

postcss.config.js文件说明

1. PostCss

PostCSS 是一个允许使用 JS 插件转换样式的工具。这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。

PostCSS 被广泛地应用，其中不乏很多有名的行业领导者，如：维基百科，Twitter，阿里巴巴， JetBrains。PostCSS 的 Autoprefixer 插件是最流行的 CSS 处理工具之一。

PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。在这之后，这个 API 便可被许多插件利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。

截止到目前，PostCSS 有 200 多个功能各异的插件。你可以在插件列表或搜索目录找到它们。

PostCSS 是一个处理 CSS 的处理工具，本身功能比较单一，它主要负责解析 CSS 代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如：

Autoprefixer 插件可以实现自动添加浏览器相关的声明前缀
PostCSS Preset Env 插件可以让你使用更新的 CSS 语法特性并实现向下兼容
postcss-pxtorem 可以实现将 px 转换为 rem
...
PostCSS 一般不单独使用，而是与已有的构建工具进行集成。

Vue CLI 默认集成了 PostCSS，并且默认开启了 autoprefixer 插件。

Vue CLI 内部使用了 PostCSS。
可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。
vue cli已经默认开启了 autoprefixer。如果要配置目标浏览器，可使用 package.json 的 browserslist 字段。

autoprefixer

autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件，browsers 用来配置兼容的浏览器版本信息，但是写在这里的话会引起编译器警告。

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

警告意思就是说你应该将 browsers 选项写到 package.json 或 .browserlistrc 文件中。
browserslist：

你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

参考官方文档中的语法，我们将 .browserslistrc 修改如下：

Android >= 4.0
iOS >= 8

postcss-pxtorem

rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换
propList 用来设定可以从 px 转为 rem 的属性；例如 * 就是所有属性都要转换，width 就是仅转换 width 属性

如果你使用的是基于 lib-flexable 的 REM 适配方案，则应该设置为你的设计稿的十分之一。
例如设计稿是 750 宽，则应该设置为 75。
但是如 Vant 建议设置为 37.5，所以如果用vant的话就设置成37.5，这时就要注意设计搞和配置基准的换算