vue项目开发之样式篇——postcss插件

propList: [“*”], // 转化为vw的属性列表

viewportUnit: “vw”, // 指定需要转换成视窗单位

fontViewportUnit: “vw”, // 字体使用的视窗单位

selectorBlaskList: [“.ignore-”], // 指定不需要转换为视窗单位的类

mediaQuery: false, // 允许在媒体查询中转换px

minPixelValue: 1, // 小于或等于1px时不转换为视窗单位

replace: true, // 是否直接更换属性值而不添加备用属性

exclude: [], // 忽略某些文件夹下的文件或特定文件

landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)

landscapeUnit: “vw”, // 横屏时使用的单位

landscapeWidth: 1134 // 横屏时使用的视窗宽度

}

注意：

1、@media 默认不转化px，可配置mediaQuery: true

2、@keyframes 默认不转化px，可手动转vw

☞官方中文文档

4.autoprefixer

---

可根据不同浏览器生产兼容浏览器样式前缀，不用手动一一添加前缀

☞官方中文文档

5.precss

---

可以像scss一样，在css文件中写混合、模块化语法。

☞官方中文文档

更多有趣的插件请☞这里

6.postcss-cssnext

---

7.postcss-modules

---

8.stylelint

---

9.LostGrid

---

三、配置

===================================================================

安装好项目依赖后postcss在根目录下配置postcss.config.js文件，代码如下

module.exports = {

plugins: {

“postcss-partial-import”: {},

precss: {},

“postcss-advanced-variables”: {},

autoprefixer: {},

‘postcss-px-to-viewport’: {

unitToConvert: “px”, // 默认值px，需要转换的单位

viewportWidth: 375, // 视窗的宽度,对应设计稿宽度

viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置

unitPrecision: 3, // 指定px转换为视窗单位值的小数位数

propList: [“*”], // 转化为vw的属性列表

viewportUnit: “vw”, // 指定需要转换成视窗单位

fontViewportUnit: “vw”, // 字体使用的视窗单位

selectorBlaskList: [“.ignore-”], // 指定不需要转换为视窗单位的类

mediaQuery: false, // 允许在媒体查询中转换px

minPixelValue: 1, // 小于或等于1px时不转换为视窗单位

replace: true, // 是否直接更换属性值而不添加备用属性

exclude: [], // 忽略某些文件夹下的文件或特定文件

landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)

landscapeUnit: “vw”, // 横屏时使用的单位

landscapeWidth: 1134 // 横屏时使用的视窗宽度

}

}

}

后续更新。。。

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

使用的单位

landscapeWidth: 1134 // 横屏时使用的视窗宽度

}

}

}

后续更新。。。

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。