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