postcss-pxtorem单页面使用

PostCSS px-to-rem 插件是一个用于将像素单位转换为相对单位（如 rem）的工具，主要用于响应式设计中，方便在单页面应用（SPA）中保持一致的设计比例。它通过查找 CSS 中的像素值，并将其转换为指定的根元素（通常`html`元素或自定义选择器）的rem值。

使用步骤如下：

1. 安装插件：首先，你需要在项目中安装 `postcss-cli` 和 `postcss-pxtorem`。可以使用 npm 或 yarn 进行安装：

   npm install --save-dev postcss postcss-cli postcss-pxtorem
   # 或者
   yarn add -D postcss postcss-cli postcss-pxtorem

2. 配置 PostCSS：在项目的 `postcss.config.js` 文件中配置 px-to-rem，设置基础单位（通常是 html 的 font-size）：

   module.exports = {
     plugins: [
       require('postcss-pxtorem')({
         rootValue: 16, // 设定 rem 基准，例如 16px 等于 1rem
         unitPrecision: 5, // 设置小数点后的位数
         propList: ['*'], // 可选，只转换特定属性， '*' 表示所有
         replace: true, // 是否替换原始像素值，默认为true
       }),
     ],
   };

3. 将插件应用到源文件：在需要处理的 `.css` 文件中，PostCSS 会自动处理转换。如果在 SCSS 或 Less 等预处理器中，记得在构建时包含 PostCSS 插件。

4. 使用转换后的 rem 单位：现在，你的样式中的像素值已经被转换成了 rem，适应了不同屏幕尺寸下的响应式布局。