postcss使用

postcss：它将CSS转换成抽象语法树(AST)，也就是JavaScript可以操作的一种数据形式。基于JavaScript的PostCSS插件可以执行不同的代码操作。PostCSS本身并没有改变你的CSS，它请允许插件执行和转换你的代码。Postcss不是预处理器，不是后处理器，不是新语法，而是通用平台，适用于各种css相关的插件，旨在更加方便，快捷，舒适的编写css。

1. h5移动端屏幕适用性解决方案

cssnano	用来优化和压缩css，注意cssnano中包含autoprefixer
postcss-aspect-ratio-mini	容器比匹配
postcss-cssnext	进行嵌套编程
postcss-px-to-viewport	将px装换为vw，以适应各种屏幕
postcss-write-svg	1px细线的绘制

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 667, // (Number) 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置著作权归作者所有。
      unitPrecision: 5, // (Number) 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // (String) 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // (Number) 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // (Boolean) 允许在媒体查询中转换`px`
    },
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

2.postcss界面嵌套css样式写法

postcss-import	import
postcss-url	url
postcss-bem	元素规则命名
postcss-nested	嵌套
postcss-preset-env	变量 运算
postcss-simple-vars	变量

参考资料

1. https://www.w3cplus.com/preprocessor/postcss-and-crazy-things-you-can-do-with-it.html
2. https://www.w3cplus.com/mobile/vw-layout-in-vue.html
3. http://ju.outofmemory.cn/entry/341641