postcss-px2viewport-vcreate

移动端自适应方案（px --> viewport）

说明

在之前有一种流行已久的移动端适配方案，那就是 rem，我想下面这两句代码，有不少老移动端都不会陌生：

const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth
document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px'

没错，在那个移动端 UI 稿尺寸为 7501334 满天飞的时代，这两句代码确实给开发者带来了很大的方便，这样设置根 font-size 后，px 和 rem 的转换比例成了 100, 为比如 UI 稿一个长宽分别为 120px40px，那么开发者对应的写成 1.2rem*0.4rem 就可以了

这种换算已经是颇为方便，但是并非所有的项目都能这样去设置一个方便换算的比例系数，当比例系数为 100 时，小数点往前面挪两位就行了，然而有的项目设置的换算系数千奇百怪，有 50 的，有 16 的，很多已经严重超出口算力所能及的范畴了。所以后来诞生的 px-to-rem 或者 px2rem 就是为了解决这个问题

理想方案

1. 首先，无论换算方不方便，我都不想换算（就是这么懒 🤭），我也不想去操心什么转换系数
2. 其次，有些属性或者类选择器我不想进行转换
3. css 代码要足够简洁，我只希望看到一种单位，那就是 px

方案一 lib-flexible + postcss-pxtorem

在相当长一段时间里，这两个插件搭配都是解决移动端布局的神器，lib-flexible 是阿里手淘系开源的一个库，用于设置 font-size，同时处理一些窗口缩放的问题。直到今天，我仍然可以说，lib-flexible + postcss-pxtorem 是解决移动端布局的主流，但是我们可以好好想一想，它是否有什么不足？

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

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

lib-flexible github 代码首页作者标注了一段有意思的话：

由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方。

方案二 viewport + postcss-px-to-viewport

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

Usage

安装

npm i postcss-plugins-vcreate --save-dev

项目根目录创建 .postcssrc.js 文件，并添加如下配置：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ['wrap'], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  }
}

ignore

• /* px-to-viewport-ignore-next */ : on a separate line, prevents conversion on the next line.
• /* px-to-viewport-ignore */ : after the property on the right, prevents conversion on the same line.

.class {
  /* 转换时忽略下行 */
  /* px-to-viewport-ignore-next */
  width: 10px;
  padding: 10px;
  height: 10px; /* px-to-viewport-ignore */
  border: solid 2px #000; /* px-to-viewport-ignore */
}