移动web开发适配

根据设备分辨率设置根元素的fontSize，从而设置rem。

<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 = 100 * (clientWidth / 640) + 'px';
                };

        if (!doc.addEventListener) return;
        recalc();
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

移动web开发

• 运行在手机端的web页面（H5页面）
• 跨平台
• 基于webview
• 告别IE拥抱webkit
• 更高的适配性和性能要求

常见的移动web适配方法

rem原理与简介

rem,font size of the root element

字体单位

• 值根据html根元素的font-size大小而定，同样可以作为宽度，高度等单位

适配原理

• 将px替换成rem，动态修改html的font-size适配

兼容性

• Ios6以上和android 2.1以上，基本覆盖所有流行的手机系统

rem进阶

• rem基准值的计算
• rem数值计算与构建
• rem与scss结合使用
• rem适配实战