vueH5最佳适配方案（转）

转自：https://www.cnblogs.com/zhangnan35/p/12682925.html

第一种方案是lib-flexible+postcss-pxtorem，在相当长一段时间里，这两个插件搭配都是解决移动端布局的神器，lib-flexible是阿里手淘系开源的一个库，用于设置font-size，同时处理一些窗口缩放的问题。其中一位主要贡献者正是阿里的大神winter。

直到2020年的今天，我仍然可以说，lib-flexible+postcss-pxtorem是解决移动端布局的主流，但是我们可以好好想一想，它是否有什么不足？

从我个人来说，我认为它主要有以下两个不足：

1.两个插件需要配套使用，而且rootValue设置的值不好理解
2.rem是相对于html元素字体单位的一个相对单位，从本质上来说，它属于一个字体单位，用字体单位来布局，并不是太合适

第二种方案是viewport，postcss-px-to-viewport就是这样一款优秀的插件，它解决了以上提到的痛点，也满足以上提到的理想要求。它将px转换成视口单位vw，众所周知，vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth

1。我们先把它安装到项目的开发环境中：
npm i postcss-px-to-viewport -D
yarn add postcss-px-to-viewport -D

2.在项目根目录下添加.postcssrc.js文件,写入下面的代码

3.适配UI框架和H5页面

vant团队的是根据375px的设计稿去做的，理想视口宽度为375px。

那么，我们是否也要叫UI重新出一版375px的设计稿？

或者，我们在书写的过程心算一下，所有标注的尺寸都除以2？

让我们回到webpack本身，重新看一下这份.postcssrc.js文件，它除了暴露一个对象，也可以暴露一个函数，无论暴露什么，在webpack运行时，都会被我们配置的海量文件读取并执行。

暴露函数有一个好处，可以拿到webpack运行的当前执行文件的信息。

那么我们可以有这样一个思路：如果读取的是vant相关的文件，viewportWidth就设为375，如果是其他的文件，我们就按照我们UI的宽度来设置viewportWidth，即750。

改写.postcssrc.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
      }
    }
  }

}
注意：这里使用path.join('node_modules', 'vant')是因为适应不同的操作系统，在mac下结果为node_modules/vant，而在windows下结果为node_modules\vant

//需要注意的
1.propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的
2.selectorBlackList：转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换