REM适配

要根据屏幕的变化进行适配 两件事需要做

1. 需要把px 转化成rem

2. 需要根据当前的屏幕的变化调整当前font-size的大小

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem,我们开发时,原来怎么写 现在还怎么写,会自动转成rem

通过postcss-pxtorem转化的时候,需要设置一个基准值, font-size: 30px => rem ? 30px / 基准值 = rem值

移动端适配的时候，一般以iphone6的屏幕宽度的十分之一 作为基准值 37.5

• font-size: 30px => font-size: 30px /基准值 rem

• lib-flexible 用于动态设置 rem 基准值

首先，需要安装：

开发阶段 直接 将px => rem

# 后处理器 开发阶段使用 
$ npm i postcss-pxtorem -D
$  yarn add  postcss-pxtorem --dev

 需要对pxtorem插件进行配置,需要在项目的根目录下 建立一个 postcss.config.js文件, 这个文件是默认的文件名, 进行配置

// 此文件专门处理postcss插件
module.exports = {
  // 所有的postcss插件
  plugins: {
    //   自动给css样式加前缀的属性 display:flex  => 自动其他浏览器的前缀
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 37.5, // 基准值 font-size: 30px  =>  300/ rootValue = rem
      propList: ['*'] // 包括哪些文件  所有的文件都转化rem
    }
  }
}

 

改动postcss.config.js 之后需要重新启动服务才可以看到效果

重启启动发现,rem虽然有了,但是屏幕并没有因为变化 而改变font-size

此时我们需要第二个插件,根据当前屏幕的变化 而产生 不同的font-size

# 修改rem基准值的js插件   需要在打包后需要使用
$ npm i amfe-flexible -S  #因为 需要在运行时 实时改变 font-size大小 根据屏幕
$ yarn add amfe-flexible  

 最后，入口文件main.js导入 amfe-flexible

import 'amfe-flexible'

注意

• rootValue 是转换px的基准值，参考设备iPhone6，设备宽度375px。

• flexible 在iPhone6设备设置的 html--->font-size 也为37.5px 。

• 但是 设计稿 尺寸750px 大小，所以在设计稿量取的尺寸使用时候需要 除以2 。

设计图 => 28px => 14px /37.5 = rem