如何进行移动端适配？

参考：移动端前端适配方案（总结） – 面试重点

概括

• 通过CSS3的media queries，即媒体查询
• flex布局
• rem + viewport缩放
• rem方式

1、media queries

通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

2、Flex弹性布局

参考：meta name=“viewport” content=“width=device-width,initial-scale=1.0” 究竟什么意思

• viewport固定：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
• initial-scale：页面首次被显示时可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放；maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上；user-scalable:是否可对页面进行缩放，no 禁止缩放
• 高度定死，宽度自适应，元素采用px做单位
• 随着屏幕宽度变化，页面也会跟着变化

3、rem + viewport缩放

根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。
彻底弄懂css中单位px和em，rem的区别
其实现原理为：根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.
dpr定义：设备像素比（dpr） = 设备像素（分辨率）/设备独立像素（屏幕尺寸）
例如dpr为3，则页面整体放大3倍，1px（css单位）默认为3px(物理像素)，然后viewport设置为1/3, 这样页面整体缩回原始大小. 从而实现高清

4、rem实现

• viewport固定：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
• 通过代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)，实际上是rem + dpr

!function (d) {
    var c = d.document;
    var a = c.documentElement;
    var b = d.devicePixelRatio;
    var f;

    function e() {
      var h = a.getBoundingClientRect().width, g;
      if (b === 1) {
        h = 720
      }
      if(h>720) h = 720;//设置基准值的极限值
      g = h / 7.2;
      a.style.fontSize = g + "px"
    }

    if (b > 2) {
      b = 3
    } else {
      if (b > 1) {
        b = 2
      } else {
        b = 1
      }
    }
    a.setAttribute("data-dpr", b);
    d.addEventListener("resize", function () {
      clearTimeout(f);
      f = setTimeout(e, 200)
    }, false);
    e()
  }(window);