rem单位做界面自适应（等比扩大）

问题描述

1. 最近要做一个大屏的功能，设计的时候只考虑到了1920*1024的分辨率
2. 考虑到大屏界面除了在大屏显示也有可能在PC电脑中显示，就要做适配

解决办法

1. 使用 rem 单位来解决（html默认1rem = 16px）
2. 开发的时候按照1920宽度的设计来做，然后单位全部使用rem
3. 监听窗口的变化，如果宽度超过1920则rem等比例扩大，如果小于1920，则rem按照1920的宽度计算
4. rem 在此就相当于是一个百分比的概念了

如何实现

1. 设置html的rem值

html {
  font-size: 625%; /*0.01rem = 1px*/
}

2. 监听浏览器宽度的变化

(function () {
  var doc = document
  var win = window
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function () {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    // 如果小于1920则rem不变化，如果超过1920则等比例变化
    if (clientWidth <= 1920) {
      clientWidth = 1920
    }
    // 设置根元素font-size大小
    docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'
  }
  // 屏幕大小改变，或者横竖屏切换时，触发函数
  win.addEventListener(resizeEvt, recalc, false)
  // 文档加载完成时，触发函数
  doc.addEventListener('DOMContentLoaded', recalc, false)
})()