移动端vw、vh适配方案

1. 关于兼容性

https://caniuse.com/#feat=viewport-units

截屏2020-09-01上午11.28.33.png

基本主流浏览器已经兼容

2. vw、vh工作原理

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份；

• vw(Viewport's width)： 1vw等于视觉视口的 1%
• vh(Viewport's height) : 1vh 为视觉视口高度的 1%

如果视觉视口为 375px，那么 1vw=3.75px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/3.75=20vw。

3. 如何在vue项目中适配

• 首先下载依赖

npm install postcss-px-to-viewport --save-dev

• 修改postcss.config.js 或者 .postcssrc.js文件

module.exports = {
  "plugins": {
    "postcss-px-to-viewport": {
      viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false,     // 允许在媒体查询中转换`px`
      exclude: [/node_modules/] // 设置忽略文件，用正则做目录名匹配
    }
  }
}

4. 一些使用中的问题

引用vant后发现组件变得很小，被压扁了一半，这是因为vant团队是根据375px的设计稿去做的。

适配方法：修改postcss.config.js配置文件；

const path = require('path');
module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }
}