【開發記錄】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;
}