PostCSS使用及配置

PostCSS 是一个用于处理 CSS 的工具，它可以帮助开发者在样式表中应用各种转换、插件和工具。它是一个基于 Node.js 的工具，通过使用插件，可以在 CSS 预处理和后处理阶段执行各种任务，从而提高开发效率并允许使用一些实验性的 CSS 特性。

以下是关于 PostCSS 的一些重要概念和功能：

1. 工作原理： PostCSS 的工作原理是将 CSS 解析成抽象语法树（AST），然后通过一系列插件对 AST 进行处理，最后再将 AST 转回成 CSS。

2. 插件系统： PostCSS 的核心是一个强大的插件系统。通过使用各种插件，你可以执行各种任务，例如添加前缀、压缩代码、支持变量等。常见的插件有 autoprefixer、cssnano、postcss-preset-env 等。

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      // 视窗的宽度，单位为 px
      viewportWidth: 750,

      // 如果需要指定视窗的高度，也可以设置该选项，单位为 px
      // viewportHeight: 667,

      // 需要转换的 CSS 属性列表，"*" 表示所有属性
      propList: ["*"],

      // 转换后的值保留的小数位数
      unitPrecision: 3,

      // 使用的视窗单位，如 'vw' 表示视窗宽度的百分比
      viewportUnit: 'vw',

      // 字体使用的视窗单位，一般保持与 viewportUnit 一致
      fontViewportUnit: 'vw',

      // 需要忽略的 CSS 选择器，如 '.ignore' 将不会被转换
      selectorBlackList: ['.ignore'],

      // 小于 1px 的值不转换
      minPixelValue: 1,

      // 是否在媒体查询中也转换 px
      mediaQuery: true,

      // 需要转换的单位，默认为 'px'
      unitToConvert: 'px',
    },
    autoprefixer: {},  // Autoprefixer 插件，用于添加浏览器前缀
  },
};

这是一个典型的 postcss-px-to-viewport 插件的配置文件，用于将 CSS 中的像素单位（px）转换为视窗单位（vw）,

在这个配置中，主要使用了 postcss-px-to-viewport 插件来实现将像素单位转换为视窗单位。其他选项是为了灵活配置插件的行为。autoprefixer 插件被包含在插件列表中，用于添加浏览器前缀。

需要注意的是，配置中的 viewportWidth 表示视窗的宽度，单位为像素。如果需要指定视窗的高度，可以设置 viewportHeight。其他选项可以根据具体需求进行调整。

安装postcss和viewport插件，其他相关插件可以按需安装

npm install postcss
npm install postcss-px-to-viewport 

安装对应插件后需在项目根目录下新建文件  .postcssrc.js

设置完所有内容重启项目，页面即可看到对应效果