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

最新推荐文章于 2024-02-03 14:56:00 发布

原创最新推荐文章于 2024-02-03 14:56:00 发布 · 881 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #css3

Vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

rem

1 篇文章

订阅专栏

本文介绍了在移动端开发中如何利用lib-flexible动态设置REM基准值，以及使用postcss-pxtorem将px转换为rem。通过详细步骤和示例，阐述了这两个工具的配合使用，解决移动端适配问题，并讨论了在搭配UI框架如vant时，如何处理字体基准字号的动态设置。

使用脚手架的移动端 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: ['*']
    }
  }
}
```