使用postcss-px-to-viewport-8-plugin进行屏幕适配

在 Vue 项目中，可以使用 postcss-px-to-viewport-8-plugin 进行屏幕适配。这个插件可以将 px 单位转换为视口单位，包括 vw、vh、vmin 和 vmax，从而实现在不同设备上的自适应布局。

1.安装 postcss-px-to-viewport-8-plugin

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

2.在项目根目录下创建 postcss.config.js 文件，并添加以下代码：

module.exports = {
  plugins: {
    // autoprefixer: {},
    'postcss-px-to-viewport-8-plugin': {
      unitToConvert: 'px', // 要转化的单位
      viewportWidth: 1920, // 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 // 是否处理横屏情况
    }
  }
};

以上代码表示将将 px 转换为 vw 单位，同时设置了视窗宽度为 1920，表示设计稿的宽度是 1920px。

3.在项目中使用转换后的单位，比如：

1.  
   .app {
2.  
   width: 100vw;
3.  
   }
4.  
   .lable-title{
5.  
   font-size: 18px;
6.  
   padding: 20px;
7.  
   }

在以上 CSS 代码中，.app 的宽度使用了 vw 单位，而 .lable-title的字号和内边距使用了 px 单位，它们会自动被插件转换为相应的单位。

通过以上步骤，我们就可以简单地在 Vue 项目中使用 postcss-px-to-viewport-8-plugin 进行屏幕适配。

这篇好文章是转载于：学新通技术网