移动端怎么做自适应

一般来说是rem+flex布局
回答这个是没有问题的，但是我是面试官的话，会问你，rem是什么，怎么就实现了自适应布局。

rem是相对于body根元素的fontSize设置的大小来自动匹配的，那么问题来了，这个fontSize是怎么设置的

一般设计稿给的大小是375px，我们要根据屏幕的宽度自动设置fontSize的大小，怎么计算呢，计算的规则是怎么样的

// rem.js
(function (doc, win) {

  var prem=16; //fontSize   16？  为了尽量不破坏ionic ui的样式 

  var pwidth=375//设计稿宽度

  var docEl = doc.documentElement,

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

    recalc = function () {

      var clientWidth = docEl.clientWidth;

      if (!clientWidth) return;

      docEl.style.fontSize = prem * (clientWidth / pwidth) + 'px';

    };

  if (!doc.addEventListener) return;

  win.addEventListener(resizeEvt, recalc, false);

  doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

当屏幕orientationchange(旋转)事件触发或者窗口resize被触发时，我们用屏幕的宽度/设计稿的宽度，再乘以prem的大小，这里设置的是16。比如iphone6/7/8是375px(独立像素)，那么fontSize就是16px。

设计稿给的单位是px，我们实际开发用的是rem, 这个时候就要用到css计算了，其实不写也是可以的，只不过你每次都得自己算下

利用强大的scss的function功能

rem动态转换.png image.png

比如设计稿的div的宽度是100px，我们总不可能写成100rem吧, fontSize是16px，这也就意味着1rem=16px，那么这里有很简单的数学计算题，div的宽度=100/16

当然meta标签也有一句比较重要的代码

meta  content="width=device-width, initial-scale=1,maximum-scale-scale=1,user-scalable=1">