移动端响应式px转换插件PostCSS的使用~

一、背景：

在移动端开发中，我们通常使用 viewport 来适配不同的屏幕尺寸。但是，在实际开发中，我们经常遇到以下问题：
1、在不同屏幕尺寸下显示效果不一致。
2、在高分辨率屏幕上，元素过小或过大。
3、使用 rem 单位存在兼容性问题。

二、作用：

设计稿使用 px 单位，但需要适配不同屏幕尺寸。它可以将 px 单位转换为视口单位（vw、vh 或 vmin）

二、安装

npm install postcss-px-to-viewport --save-dev

三、配置

1、postcss.config.js(这里介绍的是将px转换成vw/vh，重启项目即可实现px转vw)

// postcss.config.js
module.exports = {// 导出PostCSS配置对象
  plugins: {// 配置要使用的PostCSS插件
    'postcss-px-to-viewport': {// 配置px转vw/vh的插件
      viewportWidth: 750,// 基准视口宽度（设计稿宽度，单位px）
      viewportUnit: 'vw',// 转换后的视口宽度单位（vw表示视口宽度百分比）
      fontViewportUnit: 'vh',// 字体转换后的单位（vh表示视口高度百分比）
      unitPrecision: 6,// 转换后保留的小数位数
      propList: ['*', '!border*', '!box-shadow'], // 需要转换的CSS属性列表
      // *表示所有属性，!表示排除
      selectorBlackList: ['.ignore', '.hairlines'],// 不进行转换的选择器黑名单
      minPixelValue: 2,// 小于2px的值不进行转换
      mediaQuery: true,// 是否转换媒体查询中的px单位
      exclude: /node_modules/  // 排除node_modules目录下的文件
    },
    'autoprefixer': {// 配置自动添加浏览器前缀的插件
      overrideBrowserslist: ['> 1%', 'last 2 versions']// 指定需要兼容的浏览器版本
      // 全球使用率大于1%的浏览器
      // 每个浏览器的最后两个版本
    }
  }
}

四、实际转换示例

//输入
.container {
  width: 750px;
  padding: 20px;
  border: 1px solid #000;
  font-size: 24px;
}

.ignore {
  margin: 10px;
}

//输出
.container {
  width: 100vw;       /* 750/750 * 100 */
  padding: 2.66667vw; /* 20/750 * 100 */
  border: 1px solid #000; /* 被排除 */
  font-size: 3.2vh;   /* 24/750 * 100 (使用vh单位) */
}

.ignore {
  margin: 10px;       /* 黑名单选择器不转换 */
}

五、视口定义：

指用户当前可见的网页区域（不包括浏览器工具栏、滚动条等）。

在移动端，视口通常等于设备屏幕宽度；在桌面端，视口随浏览器窗口大小变化。