vant移动端适配

Vant 轻量、可靠的移动端 Vue 组件库

浏览器适配

Viewport 布局

Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。

postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。

PostCSS PostCSS 示例配置

下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译。

Rem 布局适配

如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值. PostCSS 配置 1.在根目录下新建一个postcss.config.js

2.下载

npm install postcss-pxtorem --save-dev

3.在postcss.config.js中粘贴以下代码片段

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      //这是基准值，在375px的屏幕变大rem的值会变大，小于这个大小元素的rem值会变小
      propList: ['*']
    }
  }
}

设置基准值lib-flexinle

1.下载

 npm i -S amfe-flexible

2.在main.js中引入

 import 'amfe-flexible'
 

这样就完成适配了

其他设计稿尺寸

如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

注意事项：

该插件不能转换行内样式中的 px，例如

<div style="width: 200px;"></div>

postcss-pxtorem 插件的配置参数详解：

rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换

propList 用来设定可以从 px 转为 rem 的属性

例如 * 就是所有属性都要转换

Vant是基于375写的，所以rootValue为37.5，如果你的设计稿是750的话你就需要设置为75

最后很重要的一点就是 配置完成后需要重新启动项目