postcss-px-to-viewpor

postcss-px-to-viewport是一个优秀的插件，它可以将px单位转换为视口单位vw。在项目中使用postcss-px-to-viewport插件的步骤如下：

1. 首先，需要在项目根目录下创建一个.postcssrc.js文件，并添加以下配置：

module.exports = {
  plugins: {
    'autoprefixer': {}, // 用来给不同的浏览器自动添加相应前缀
    'postcss-px-to-viewport': { 
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  }
};

2. 然后，需要在项目的package.json文件中添加postcss-px-to-viewport插件的依赖：

"devDependencies": {
  "postcss-px-to-viewport": "^0.1.0"
}

3. 最后，重新运行项目，使配置文件生效。在需要转换的样式中，使用px单位进行编写，并在打开控制台后，可以看到已经进行了转换。

这样，postcss-px-to-viewport插件就会自动将样式中的px单位转换为视口单位vw，以适配不同尺寸的屏幕。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [postcss-pxtorem移动端适配的实现](https://download.csdn.net/download/weixin_38743391/14802061)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [移动端布局之postcss-px-to-viewport](https://blog.csdn.net/sinat_17775997/article/details/127101451)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]