关于移动端布局

移动端布局的问题

如今手机设备多种多样，屏幕大小各不相同，下面说一下如今的几种移动端布局.
1. 宽度百分比布局 + px布局.
    先说一下，这种布局虽然我现在没有用，但是还是有见到过，这种布局如果你按照750设计图来做的话其实在主流手机屏幕上展示都挺不错的，但是如果屏幕非主流的话，那显示出来的效果就很差了，所以这种布局不建议使用.
2. 媒体查询 + px布局
    这种布局用的话还是可以的，但是媒体查询毕竟也是在一个区间内，而且不同的区间段应该写多大的px呢？这也是一个问题.
3. rem布局 + flex布局
    ok，说到正题了，这是我现阶段采用的布局，关于flex布局，强烈推荐阮一峰的关于flex布局这一章，或者菜鸟教程内的内容也可以，跟阮一峰的一样。现在重点说一下rem布局.

为什么采用rem布局

1. rem布局的原理
   首先说一下rem这个单位，rem这个单位是根据html的根字体来确定的，现在的浏览器默认的html根字体是16px，也就是1rem = 16px，你可以做一下实验：

   html {
    font-size: 100px;
   }
   div {
   width: 1rem;
   }

   这样最后div呈现出来的宽度其实是100px，知道了这个原理，那么如果我们使用rem单位布局，然后根据手机屏幕大小改变html的根字体的大小，这样不就实现了手机屏幕适配吗？

2. 如何动态改变html根字体的大小.
   网上关于这类的js很多，我说一下我正在使用的js，感觉比较简单而且容易理解:

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

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

一般设计稿都是按照750来给的，750也就是iphone6的设计稿，是实体手机宽度的2倍，所以上面的函数在iphone6上面设置的根字体其实是50px，那样我们在写css的时候，直接按照设计稿量出的px单位除以100，然后得出的值就是rem的值，关于rem转换，sublime和vscode上面有css转rem的插件，然后也可以写一个scss的转换函数来进行转换:

@function rem($px){
    @return ($px / 100) * 1rem;
}