分辨率相关插件

retina.js

加载高分辨率图片

postcss-px-to-viewport

postcss的插件：postcss-px-to-viewport（https://www.npmjs.com/package/postcss-px-to-viewport）

写CSS的时候严格按照设计稿上的像素值去写，这个插件负责将你写的px转换为vw。

module.exports = {

  "plugins": {

      // ...

    "postcss-px-to-viewport": {

      viewportWidth: 750,

      viewportHeight: 1334,

      unitPrecision: 3,

      viewportUnit: 'vw',

      selectorBlackList: ['.usepixel'],

      minPixelValue: 1,

      mediaQuery: false

    },

    // ...

  }

}

• viewportWidth：视口宽度，这里设置为跟设计稿宽度一致；
• viewportHeight：视口高度，随便设置一个就可以；
• unitPrecision：转换后值的精度，3表示保留3位小数；
• viewportUnit：转换成什么视口单位，这里当然是vw；
• selectorBlackList：是一个选择符数组，对应声明中的像素单位不会转换；
• minPixelValue：最小像素值，大于等于这个值才会转换；
• mediaQuery：是否转换媒体查询中的像素。

iOS 8+和Android 4.4+都支持vw。