【开发记录】H5移动端适配rem

关于移动端的页面，使用rem解决适配问题，按比例与设计稿保持一致。

前言

设计稿为750px，开发标准为iphone6/7/8/X，实际开发宽度为375px；开发中除跟节点外所有size皆使用rem单位。

 

编辑器：

【VScode】前端开发常用

插件：

【cssrem】这个插件可以在写px时自动计算rem值，在首选项中搜索cssrem，设置Root Font Size；跟节点大小我这里设为12px；

设计稿：

【蓝湖】在蓝湖中选择自定义开发平台=>设计稿一般是750px，这里开发过程中减半指定宽度375px与开发宽度一致；选择元素后可看到计算后的px

在APP中计算跟节点的font-size，这里可以根据宽度计算出跟节点的大小，按比例缩放

app.vue

export default {
  name: 'app',
  created () {
    this.recalc()
    window.addEventListener(this.resizeEvt, this.recalc, false)
  },
  computed: {
    resizeEvt() {
      return 'orientationchange' in window ? 'orientationchange' : 'resize'
    }
  },
  methods: {
    // 计算HTML的fontsize
    recalc() {
      let clientWidth = document.documentElement.clientWidth
      if (!clientWidth) {
          return;
      }
      if (clientWidth > 414) {
        clientWidth = 414
      }
      window.document.documentElement.style.fontSize = 12 * (clientWidth / 375) + 'px'
    }
  },
  beforeDestroy () {
    window.removeEventListener(this.resizeEvt, this.recalc, false)
  },
}

css设置

html,body{
  overflow-x: hidden;
  max-width: 414px;
  font-size: 12px;
  margin: 0 auto;
}