移动端适配

一、viewport方案

viewport指的是视口，浏览器兼容性好；
可利用vw、vh相对单位进行移动端屏幕适配

二、怎么适配

1.设置meta标签

（1）将viewport设置为设备宽度，不允许用户手动缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

（2）安装postcss-px-to-viewport插件自动将px转化为vw

a.安装插件后，修改postcss配置文件
设置设计稿跨度

（3）解决vant框架兼容问题

vant的设计稿宽度为375px，动态改变viewportWidth的值即可

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