Vant 中的样式默认使⽤ px 作为单位，如果需要使⽤ rem 单位，推荐使⽤以下两个⼯具： postcss-pxtorem 是⼀款 postcss 插件，⽤于将单位转化为 rem 。 lib-flexible ⽤于设置 rem 基准值。

lib-flexible

lib-flexible ⽤于动态设置 rem 基准值。 1. 安装 npm i -S amfe-flexible 2. 在 main.js 中加载执⾏该模块： import ‘amfe-flexible’ 通过模拟器切换设备，查看 html 元素 font-size 是否能够⾃动变化

postcss-pxtorem

⽤于将 px 设置为 rem 。 1. 安装 npm install postcss-pxtorem -D 2. 在项⽬根⽬录创建 .postcssrc.js ⽂件，并设置以下配置 module.exports = { plugins: { ‘autoprefixer’: { // browsers: [‘Android >= 4.0’, ‘iOS >= 8’] }, ‘postcss-pxtorem’: { rootValue: 37.5, propList: [‘*’] } } } 设置测试代码，在浏览器中查看是否能将 px ⾃动转换为 rem 。

PostCSS

官⽹：https://www.postcss.com.cn/

PostCSS 是⼀个允许使⽤ JS 插件转换样式的⼯具。 这些插件可以检查（

lint）你的 CSS，⽀持 CSS Variables 和 Mixins， 编译尚未被浏览器⼴泛⽀持的先进的 CSS 语法，内联图⽚，以及其它很多优秀的功能。 PostCSS 被⼴泛地应⽤，其中不乏很多有名的⾏业领导者，如：维基百科，Twitter，阿⾥巴巴，JetBrains。PostCSS 的 Autoprefixer 插件是最流⾏的 CSS 处理⼯具之⼀。 PostCSS 是⼀个处理 CSS 的处理⼯具，本身功能⽐较单⼀，它主要负责解析 CSS 代码，再交由插件来 进⾏处理，它的插件体系⾮常强⼤，所能进⾏的操作是多种多样的，例如： Autoprefixer 插件可以实现⾃动添加浏览器相关的声明前缀 PostCSS Preset Env 插件可以让你使⽤更新的 CSS 语法特性并实现向下兼容 postcss-pxtorem 可以实现将 px 转换为 rem … PostCSS ⼀般不单独使⽤，⽽是与已有的构建⼯具进⾏集成。 Vue CLI 内部集成了 PostCSS，并默认开启了 autoprefixer 插件，如果要配置⽬标浏览器，可使⽤ package.json 的 browserslist 字段。 之前我们设置的 .postcssrc.js 就是 PostCSS 的配置⽂件，但需要注意的时，内部 autoprefixer 设置 browsers 配置兼容浏览器信息的写法不被推荐，应添加到 .browserlistrc.js 中

浏览器适配 - 图1

修改 .browserlistrc.js。

> 1% last 2 versions not dead Android >= 4.0 iOS >= 8