21.移动端自适应方案

Rem + viewport 方案

优点： 兼容性相对较好，页面不会因为伸缩变形，自适应效果好 缺点： 需要配合 js 监听分辨率变化来改变 font-size

核心代码：

1. 如果页面的宽度超过了 640px，那么页面中 html 的 font-size 恒为 100px
2. 否则，页面中 html 的 font-size 的大小为： 100 * (当前页面宽度 / 640)

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 640) {
        docEl.style.fontSize = "100px";
      } else {
        docEl.style.fontSize = 100 * (clientWidth / 640) + "px";
      }
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

1. 为什么是 640px？
   1. 对于手机屏幕来说，640px 的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。
2. 为什么是 100px
   1. 用 rem 换算起来方便
3. 怎么解决 1px 问题？（对于 dpr 大于 1 的屏幕）
   1. 根据设备像素比，设置 view-port 的 scale 值

vw/vh 布局

vw 布局 视口是浏览器中用于呈现网页的区域 缺点： 兼容性问题 优点： 纯 css 移动端适配方案，无需结合 js 相比于 rem，vw 更加清晰简单些

flex 布局

优点

• 根据弹性布局的规则，可容易的实现某种布局效果，是现在大多数项目采用的布局方式 缺点
• 相对来说，兼容性不是很好

媒介查询