使用脚手架的移动端 rem 适配方案（建议收藏）

使用脚手架的移动端 rem 适配方案

• 主要使用的到两个插件
  • lib-flexible 用于设置 rem 基准值
  • postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

lib-flexible

使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）

• 安装

  • 使用 npm i amfe-flexible

• 引用

  • 在main.js入口文件引用该文件

  • import ‘amfe-flexible’

• 之后html根元素中将自动根据屏幕大小添加不同的font-size

---

---

postcss-pxtorem

使用 postcss-pxtorem 将 px 转为 rem

• 安装

  • 使用 npm i postcss-pxtorem

• 使用

  • 在项目根目录创建文件.postcssrc.js
  • 在文件下添加以下代码

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

  • 重新启动项目
  • 但是现在重启项目，可能(vue)会出现警告,但不影响项目的使用

  ---

• autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件，browsers 用来配置兼容的浏览器版本信息，但是写在这里的话会引起编译器警告
• 我们只需要删除autoprefixer代码配置即可，vue的内部也实现了配置兼容的浏览器版本信息，所以不用担心删除之后的问题

---

搭配ui框架使用(vant)

• 在开发中，可能会用到ui框架，那样就会有大概率出现字体基准字号不同的问题

  • VANT UI基准字号为37.5,移动端设计稿一般为750
    • 这样就会导致，如果在配置文件中将rootValue属性设置为37.5时，当我们自身设置样式时，要将设计稿的样式除以2
    • 如果设置为75，当我们使用ui框架时，便会小一半
  • 所以我们需要动态设置基准字号
  • rootValue属性支持用一个函数作为参数
    • postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
    • 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
  • 所以我们可以修改配置文件.postcssrc.js如下

  module.exports = {
    // 配置要使用的 PostCSS 插件
    plugins: {
      // 配置使用 postcss-pxtorem 插件
      // 作用：把 px 转为 rem
      'postcss-pxtorem': {
        rootValue ({ file }) {
          return file.indexOf('vant') !== -1 ? 37.5 : 75
        },
        propList: ['*']
      }
    }
  }