移动端根据屏幕自适应——postcss-px-to-viewport

介绍

postcss-px-to-viewport是一个插件，用起来非常方便，安装一下插件，搞个配置文件就可以直接用了。它的作用是根据配置将css样式中的px转为vw，从而让页面自适应当前屏幕大小。

使用

1、安装依赖。

npm install postcss-px-to-viewport

2、在目录下新建一个配置文件。根据需要复制以下配置，然后根据需要修改。

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 360, // 视窗的宽度，对应的是我们设计稿的宽度，一般是360
      viewportHeight: 712, // 视窗的高度，根据750设备的宽度来指定，一般指定712，也可以不配置
      unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw", //指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: [],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      propList: ['*'], // 能转化为vw的属性列表
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false, // 允许在媒体查询中转换`px`
      replace: true, // 是否直接更换属性值，而不添加备用属性
      exclude: [
        /RightBar/,
        /gotop.vue/,
      ], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: 'vw', // 横屏时使用的单位
      landscapeWidth: 360 // 横屏时使用的视口宽度
    }
  }
}

注意

1、不要在模板上写px相关的样式，可能会不生效。（建议把样式都写在中）
2、不要在js上写有关px相关的样式，例如点击触发改变宽度等，因为不会直接将px变成vw。(建议直接自己计算出大小，将js中的px手动改为vw，vh或者百分比等)