rem自适应布局集

1. Chrome包括其内核的webview有最小字体12px的限制，下面是以1920px宽度下100px作为1rem基准.

<script type="text/javascript">
    (function(doc, win) {
        setRem();
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                setRem();
            };
        if (!doc.addEventListener)
            return;
        win.addEventListener(resizeEvt, recalc, false);
        // doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
     
    function setRem() {
        var docEl = document.documentElement;
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) {
            return;
        }
        docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
    }
</script>

2. css 实现元素自适应屏幕大小---等比缩放
   元素的margin和padding属性的值, 如果设置为百分比，都是以宽度为基准计算。在已知宽高比的情况下，css虽然不能确定height的值，但是可以确定padding-top等属性的值。
   实现思路：
   1、算出宽高比（高 / 宽），并设置为padding-top的值，height设置为0（由padding-top撑起元素的高度）。
   2、此时元素的实际内容被挤到了下方，所以用绝对定位改变其位置。

.wrap {
    height: 0;
    padding-top: 15.16%;
    position: relative;
    .content {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }
}

3. 媒体查询 (按照1920 大小 可以拓展)

@media only screen and (min-width: 1201px) and (max-width: 1500px) {
    html {
        font-size: 80px;
    }
}
@media only screen and (max-width: 1200px) {
    html {
        font-size: 75px;
    }
}