移动端rem适配(关于PostCSS文件配置）

移动端 REM 适配

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

   • lib-flexible 用于设置 rem 基准值，设置根字体的大小

   • postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

     自动将px单位转换成rem

使用 lib-flexible 动态设置 REM 基准值

html 标签的字体大小

0. 安装

   // yarn add amfe-flexible
   ​
   npm i amfe-flexible -S
   

1. 然后在 main.js 中加载执行该模块

   import 'amfe-flexible'
   

2. 最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化

   • 例如在 iPhone 6/7/8 设备下，html 标签字体大小为 37.5 px

     原理：是将一行分成10份 例如 375/10=37.5

     

使用 postcss-pxtorem 将 px 转为 rem

0. 安装

   // yarn add -D postcss-pxtorem
   // -D 是 --save-dev 的简写
   //注意需要指定版本 否则可能会报错
   ​
   npm install postcss-pxtorem@5.1.1 -D
   

   postcss-pxtorem 的版本为 postcss-pxtorem@5.1.1

1. 然后在项目根目录中创建 .postcssrc.js 文件

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

   注意 行内样式的单位不会转换 例如：<div style="width：200px;"></div>。

2. 配置完毕，重新启动服务

   npm run serve
   

3. 最后测试：刷新浏览器页面，审查元素的样式查看是否已将 px 转换为 rem

   • 转换之前的样式

     

   • 转换之后的样式

5. 注意事项：

   • 该插件不能转换行内样式中的 px，例如 <div style="width: 200px;"></div>

.postcssrc.js 配置文件

.postcssrc.js 的配置

0. .postcssrc.js 是 PostCSS 的配置文件，具体配置如下

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

注意在vue-cli中默认开启了 autoprefixer这里会引起编译器警告详情参考下述Autoprefixer 插件的配置

PostCSS 介绍

0. PostCSS 介绍

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

     • Autoprefixer 插件可以实现自动添加浏览器相关的声明前缀
     • PostCSS Preset Env 插件可以让你使用更新的 CSS 语法特性并实现向下兼容
     • postcss-pxtorem 可以实现将 px 转换为 rem

   • 目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件

1. PostCSS 一般不单独使用，而是与已有的构建工具进行集成

   • 文档介绍
   • Vue CLI 默认集成了 PostCSS，并且默认开启了 autoprefixer 插件
   • Vue CLI 内部使用了 PostCSS，你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader
   • 我们默认开启了 autoprefixer。如果要配置目标浏览器，可使用 package.json 的 browserslist 字段

Autoprefixer 插件的配置

0. autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件，browsers 用来配置兼容的浏览器版本信息

2. 但是写在这里的话会引起编译器警告

   • 警告意思就是说你应该将 browsers 选项写到 package.json 或 .browserlistrc 文件中
   • 在 Vue-cli 中已经默认开启了 autoprefixer，所以把这两行代码注释
   • 注释后重启服务就可以解决掉警告信息

postcss-pxtorem 插件的配置

0. postcss-pxtorem 插件的配置

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

   • propList 用来设定可以从 px 转为 rem 的属性

     • 例如 * 就是所有属性都要转换，width 就是仅转换 width 属性

   

1. rootValue 应该如何设置呢

   如果你使用的是基于 lib-flexable 的 REM 适配方案，则应该设置为你的设计稿的十分之一。
   例如设计稿是 750 宽，则应该设置为 75。
   

   大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样。

   但是 Vant 建议设置为 37.5，为什么呢？

   因为 Vant 是基于 375 写的，所以如果你设置为 75 的话，Vant 的样式就小了一半。
   

   所以如果设置为 37.5 的话，Vant 的样式是没有问题的，但是我们在测量设计稿的时候都必须除2才能使用，否则就会变得很大。

   这样做其实也没有问题，但是有没有更好的办法呢？我就想实现测量多少写多少（不用换算）。于是聪明的你就想，可以不可以这样来做？

   • 如果是 Vant 的样式，就把 rootValue 设置为 37.5 来转换
   • 如果是我们的样式，就按照 75 的 rootValue 来转换

2. 通过查阅文档我们可以看到 rootValue 支持两种参数类型

   • 数字：固定值

   • 函数：动态计算返回

     • postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
     • 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数

   • 修改配置如下

   /**
    * PostCSS 配置文件
    */
   ​
   module.exports = {
     // 配置要使用的 PostCSS 插件
     plugins: {
       // 配置使用 autoprefixer 插件
       // 作用：生成浏览器 CSS 样式规则前缀
       
       
       // VueCLI 内部已经配置了 autoprefixer 插件
       // 所以又配置了一次，所以产生冲突了
       
       
       // 'autoprefixer': { // autoprefixer 插件的配置
       //   // 配置要兼容到的环境信息
       //   browsers: ['Android >= 4.0', 'iOS >= 8']
       // },
   ​
       // 配置使用 postcss-pxtorem 插件
       // 作用：把 px 转为 rem
       'postcss-pxtorem': {
         rootValue ({ file }) {
           return file.indexOf('vant') !== -1 ? 37.5 : 75
         },
         propList: ['*']
       }
     }
   }
   ​
   

3. 其他

   [Android]
   >= 4.0
   ​
   [iOS]
   >= 8
   ​
   

   • 具体语法请参考这里

4. 不用写代码的方式

   在 Photoshop 中打开单位与标尺设置面板：菜单栏 -> 编辑 -> 首选项 -> 单位与标尺。

   

   将单位中的标尺和文字的单位修改为点

   打开设置图像大小面板：

   • 菜单栏 -> 图像 -> 图像大小
   • 快捷键：Alt + Ctrl + I

   

   • 关闭重新采样

   • 将宽度单位设置为点

   • 将高度单位设置为点

   • 将宽度修改为 375，高度不用动（它会适应宽度自动调整）

   点击确定完成修改。

   调整之后，我们可以看到图像的大小变成了 375 点 x 667 点（144 ppi）。

   在 iPhone 6/7/8 设备下，1个点 = 2个物理像素，所以你看到我们导出的图片还是原来的二倍图。

5. 配置完毕，把服务重启一下，最后测试。