移动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适配实战
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 移动web开发与适配 meadia也可以写在link里面: 使用media时注意 rem rem是 font si...
    jia林阅读 684评论 1 1
  • 移动web:1.html5页面2.跨平台3.告别ie,基于webkit4.对手机端的适配性和性能要有更高的要求。因...
    喵呜Yuri阅读 203评论 0 1
  • 了解真实的『REM』手机屏幕适配rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。 使用...
    张宪宇阅读 2,288评论 0 5
  • 有一朋友跟我说:我胖的时候我发现我自己不敢抬头走路,现在敢抬头走路了又害怕别人的悄言悄语是在议论我。 我的这个朋友...
    猫三非公子阅读 529评论 0 3