如何做移动端屏幕适配

1. 做横向列表时，如何适应屏幕大小

1.1 如以下例子，都是横向布局的

注：如果我们给每个 li 指定固定宽度的话，当在不同的设备上显示时，显示的效果就会不同,那么如何解决这个问题呢？

1.2 如何解决上面描述的问题

• 第一 基于 375px 的屏幕 进行开发
• 第二 使用 百分比布局 ，比如一行四个元素，则每个元素的宽就是 25%，如果每个元素之间需要间隔，可以缩小每个元素所占宽度，然后加上间隔即可。
• 第三 使用 浮动 使 li 元素横向排列

ul.category-group li.category-item{
    width: 20%;  /* 每个li 的宽度设为 20% */
    margin: 0.9375rem 0 1rem ;
    height: 5rem;
    float: left; /* 让 li 元素横向排列 */
    text-align: center;
}

2. 如何做移动端不同屏幕的适配

2.1 推荐使用 rem 布局

• 如何使用

  • 根元素（html）设置 font-size：16px; —> 16px 仅供参考，具体情况具体分析；

  • 基于 375px 的屏幕进行开发，在Chrome 浏览器下，按 F12 进入开发者模式之后，点击
    
    蓝色这个图标，即可进入手机预览模式，选择 iphone6/7/8 即可。

  • 接下来，在页面中，所有用到 px 的地方，全部转化为 rem ,如 12px 转为 rem ==> 12px / 16px = 0.75

    即 12px = 0.75rem ，所以此时的 rem 即可看做，16px;

• 使用 rem 之后，如何适配

  • 在页面的头部 插入 js 代码来进行适配，代码见下方
  • 即根据当前 设备的屏幕大小，来调整 html ==> font-size的大小，进而，等比例改变页面中所有的地方。

  // js 适配代码
  <script>
      (function (doc, win) {
          var docEl = doc.documentElement,
              resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
              recalc = function () {
                  var clientWidth = docEl.clientWidth;
                  if (!clientWidth) return;
                  
                  docEl.style.fontSize = 16 * (clientWidth / 375) + 'px';
              };
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window)
  </script>