[移动端]移动端 rem 适配 px

楼主^#

更多发布于：2020-12-01 09:38

如果是做 PC 端的网页，无需做 rem 适配，但是做 H5 开发，rem 是需要做一下的，

首先需要安装：

yarn add lib-flexible -S
yarn add postcss-pxtorem -D

这里 lib-flexible 是网页做 html 的 font-size 适配用的，所以会安装到 dependencies。而 postcss-pxtorem 是在编译的时候对 px 单位转换为 rem 单位时使用，所以会安装到 devDependencies 便可。

安装好后，我们需要在 main.js 引入 lib-flexible，新增如下代码：
import 'lib-flexible/flexible'

接着我们需要为 px 单位转 rem 单位做配置。
在根目录声明 .postcssrc.js 文件，配置内容如下：

// postcss.config.js
// 用 vite 创建项目，配置 postcss 需要使用 post.config.js，之前使用的 .postcssrc.js 已经被抛弃
// 具体配置可以去 postcss-pxtorem 仓库看看文档
module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    }
  }
}

现在可以给文件里的 div 写一个样式，检测一下 rem 是否成功（最好是重新启动一下项目）

如若是上图所示的样子，说明配置已经生效了。

这里还有一个需要注意的小知识点：不需要 px 转 rem 的情况，可以使用大写的 PX 作为单位。
编译时不会将其转化为 rem 单位，也可以通过 selectorBlackList 属性声明的 .norem 前缀的 class 类名，同样也不会被转化。

图片：A8FB518D-CC0E-4951-B586-75B6332BDEDD.png

喜欢1

[移动端]移动端 rem 适配 px

最新喜欢：