vue+vant2—篇4—用viewport 单位适配浏览器

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

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

step1：安装postcss-px-to-viewport

npm i postcss-px-to-viewport -D

step2：在vue.config.js中使用

//vue.config.js
const pxtoviewport = require('postcss-px-to-viewport')

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          pxtoviewport({
            viewportWidth: 375,
            minPixelValue: 0, //px小于12的不会被转换
            //***下面的两个属性不要加
            // selectorBlackList: ["van-", ".my-"],//过滤掉vant-开头的元素选择器和.my-开头的类选择器
            //exclude: /node_modules/i//排除node_modules目录及目录下的文件
          })

        ]
      }

    },
  },
}

或者在postcss.config.js中使用，我是在vue.config.js中使用的

step3：修改vant的样式，基于上一篇博客（定制主题色），在theme.less中增加如下代码

（postcss-px-to-viewport会将原先每一个以px为单位的像素大小除以3.75，转化为vw，增加如下代码是为了在vue文件中方便使用）

//theme.less

@green: #ff6f4b;
@orange: #e6a23c;
@skeleton-row-background-color: #fff;

//Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;


//Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;

//Border
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;