vue进行h5开发px适配原理 为什么375px就是全屏宽度 所有的手机都兼容么？

解读开源代码 vueMinishop ，发现里面所有的像素单位都是用的 px ，而且最大值都不超过 375px ，有的人就会有一个疑问，难道手机的宽度只有 375px 吗？明显不同的手机，宽度都是不一样的么。

vueMinishop 项目大家可以下载源码来研究下

• GitHub镜像
• 码云镜像

细看他的代码，你会发现，原来他是用来一个 pxtorem 插件，来完成了 px 单位和 rem 单位的互换。 打开根目录下的文件： vue.config.js ，在文件的最后部分：

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  }

在百度上，可以搜到很多 pxtorem 的资料，这里就不吵冷饭了，有兴趣的朋友建议直接去看官方的说明文档（网上很多文章抄来抄去的，反而会误导）：

postcss-pxtorem 官方文档

上面的基准像素是 37.5 ，也就是说，你在样式中写 375px ，那么在任何手机、移动端设备下面，都是相当于 100% 的宽度

所以，在实际开发中，你就不需要去关心不同设备的宽度问题了，你就按照 375px 是满屏进行开发就可以了

特别注意

在实际开发中，以下场景将不会进行自动样式的适配：

1. 写在内连样式表中的样式，例如在 html 代码上写 stype="width: 375px" ，那么这个宽度就是设备的设计 375px 宽，而不会是全屏，所以样式一定要写在 class 里面；
2. js 脚本进行设置的 px ，也不会进行自动转换，所以需要自己按照基准像素换算以后再赋值实际的 px 像素