移动端适配方案 postcss-px-to-viewport

安装

npm install postcss-px-to-viewport --save-dev 或 yarn add -D postcss-px-to-viewport

根目录下新建postcss.config.js文件
 

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
       viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false     // 允许在媒体查询中转换`px`
    }
  }
}

使用
 

.SwiperBox_item {
     width: 274px;
     height: 456px;
     margin-right: 10px;
     display: inline-block;
     img{
         border-radius: 10px;
         object-fit: cover;
     }
 }

效果图

github地址
https://github.com/evrone/postcss-px-to-viewport