和光教程网

今天分享一个如何在项目中配置页面自适应，常用的有两种：一是讲px转换成rem，一种是讲px转换成vw；

今天分享的就是将样式中的px转换成vw，这个插件兼容性更高，比转换rem的更简单点；

1、首先根据下面命令安装需要的依赖

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

2、在根目录添加文件

.postcssrc.js文件或者是postcss.config.js

个人推荐使用postcss.config.js，因为在两个项目中用个，就是这个好用；

3、在新建的文件中添加一下内容

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

4、重启项目,使配置正式生效

重启后你写的px单位就会被转换成vw，下次分享转换rem插件；

https://zhuanlan.zhihu.com/p/437141960