H5移动端适配方案-rem

为什么移动端要适配: 由于移动设备的尺寸不一，所以移动端的页面要能够适应不同尺寸的设备，即页面的自适应，让页面在视觉上保持一致。

rem:rem 是css3的一种相对单位，参考是根元素HMTL的font-size的值，即html的font-size:10px;那么 1rem = 10px;

先看下面的rem书写示例

<!DOCTYPE html>

<html lang="en" style='font-size: 10px;'>

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    #box {

      width: 10rem;

      height: 10rem;

      background: red;

    }

  </style>

</head>

<body>

  <div id="box"></div>

</body>

</html>

元素box的大小是多少px呢？根据公式算，1rem = html 的 font-size 的值，那么 10rem = 10 * (html font-size的值) = 10 * 10 = 100px；所以box大小是100px * 100px；

知道了rem 怎么用了，那到底移动端是怎么适配的呢？我们知道用了rem作为单位,元素的大小就会根据根元素font-size的值进行计算，如果我们监听窗口的大小去动态的设置根元素的font-size,不就能适应不同尺寸的设备了嘛，来看看下面的一段js

  (function (doc, win, undefined) {

    var docEl = doc.documentElement,

      resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',

      recalc = function () {

        var clientWidth = docEl.clientWidth;

        if (clientWidth === undefined) return;

        docEl.style.fontSize = 10 * (clientWidth / 750) + 'px'; // 设置 根元素html的font-size

      };

    if (doc.addEventListener === undefined) return;

    win.addEventListener(resizeEvt, recalc, false);// 监听窗口改变

    doc.addEventListener('DOMContentLoaded', recalc, false) // 初始HTML加载和解析完成时

  })(document, window);

这段代码什么意思呢？就是页面初始化的时候和窗口改变的时候，根据当时窗口的大小动态设置根元素html的font-size值，再配合使用相对单位rem,来达到自适应的效果。

最为核心的是这句代码

 docEl.style.fontSize = 10 * (clientWidth / 750) + 'px'; // 设置 根元素html的font-size

 // docEl => 是 元素html

 // clientWidth => 是当前窗口的宽度

 // 750 => 是 设计稿的宽度

假如我们的开发环境的窗口和设计稿一样也是750，那个当前根元素的font-size值就是10px;此时，我们量得一个元素的宽设计稿是750px，那么我们就要写成 75rem;这样通过换算（75rem * 10px）就会得到正确的 750px；简单点就是我们量的设计稿元素的宽除以根元素的font-size值，就是我们要写成的rem的值，仔细想想是不是这样的

基于我们上面的假设，如果此时窗口变成了375px,根元素font-size 就变成了 5px,我们响应设置的 75rem 实际上会渲染成 75rem* 5px = 375px;页面也会保持同时缩放，印证了我们动态设置的没有问题，保证了页面的一致性