1、使用 rem 实现 px 的自动适配

px 是一个固定单位，无关什么设备 px 的单位是一样的。 而我们有时候是需要等比例放缩，但是又不好使用百分比，所以这个时候需要用 px 自动转换为 rem。

1、安装 postcss-pxtorem

npm install postcss-pxtorem -D

2、设置规则 在 vue.config.js 中配置

postcss: {
  plugins: [
    pxtorem({
      // 根字体大小，如果设计图是1366，则这里设置为136.6,
      rootValue: 136.6,
      propList: ["*"],
    }),
  ]
}

3、此时我们正常使用 css 中的 px 就行了

此时我们写的 px 都会被转换为 rem

4、缺陷

使用 rem 可以比较轻松的实现移动端适配，但是都是基于宽度的适配，对于高度我们都默认为可以滚屏，但是如果不想使用滚屏效果就需要另外处理。

2、使用 vh

vh 是解决高度无法做百分比适配的问题的。基本上的浏览器都已经适配了。

vh 将高度方向分成了 100vh，我们使用 vh 作为单位的时候就可以实现高度方向的布局。

3、使用布局法

可以使用 flex 布局 和 媒体查询