vw + rem移动端适配方案

在小程序开发中， 我们会使用 rpx单位书写样式，这里其实是微信帮我们处理了适配

使用vw + rem移动端适配

需要在页面入口文件中算出当前屏幕的比例，具体如下：

/* 
  设置移动端适配
  除以几  视口宽度就是多少rem  根据设计图大小改
  100 / 750 + 'vw'  这样配置的话 视口的宽度就是 750rem
  100 / 375 + 'vw'  这样配置的话 视口的宽度就是 375rem
*/

document.documentElement.style.fontSize = 100 / 750 + 'vw'

后面书写css时，直接使用rem进行编写， 就会根据页面尺寸进行自适应缩放

.item {
  /* 开启弹性盒 */
  display: flex;
  /* 设置辅轴对齐方式 */
  align-items: center;
  padding: 20rem;
  border-bottom: 1px solid #ccc;
}

.image {
  width: 280rem;
}