rem 移动端自适应 vue vant postcss-pxtorem lib-flexible

rem 移动端自适应 移动端适配

在用 vue cli3.x 写项目的过程中，遇到了一些问题，当我 用 Vant 框架时，官方文档提示说 Vant的样式默认使用 px 作单位，如果使用 rem 的话，推荐使用以下两个工具：

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

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

Vant 还提供了一份 postcss 配置。

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

按照上述代码的确可以实现移动端自适应，可是 rootValue 37.5的值是按照 750设计稿的一半来实现的，也就是说 37.5 会让 第三方 UI 框架 1:1还原，但是这样违背了初衷，你拿到 750 的设计稿，不能直接写原标注尺寸，要将值先除以 2 在写值（100的px，要写50px）。而且这个计算还是在 dpr=1 的死值情况下，我们用的 lib-flexible 插件会动态计算这个值，那样的 vant UI 组件会很不好控制 ，而且 37.5 这个基准值就不是很适合了。如果你不希望修改 第三方 UI 框架，那么改以下配置：

一、安装 lib-flexible

该插件是手淘的一种可伸缩布局方案。

npm i amfe-flexible -S // 缩写
npm install amfe-flexible --save

然后在main.js中导入此模块。

import 'amfe-flexible/index'

二、安装 postcss-pxtorem

可以将 px 单位自动转换为 rem。

npm i postcss-pxtorem -D // 缩写
npm install postcss-pxtorem --save-dev

三、修改 meta 标签头

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

四、添加 .postcssrc.js

如果脚手架工具没有创建这个 .postcssrc.js 文件，那就在根目录下新建.postcssrc.js，并添加以下配置。

module.exports = {
  "plugins": {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*', '!font-size'],
      exclude: /node_modules|folder_name/i
    }
  }
}

rootVale 改为 75 我们可以直接写 750 设计稿的原 px 单位。然后添加 exclude 忽略掉引入的 UI 框架，还可以添加 propList 可以不转换你所希望的值，比如 'font-size'，要添加多个以逗号隔开。

bingo