关闭

手机自适应

标签: 移动开发
62人阅读 评论(0) 收藏 举报
分类:
(function (doc, win) {
        if (!doc.addEventListener) {
            return;
        }
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) {
                    return;
                }
                docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
                // 此处设置在375px宽的可视区下,1rem = 20px
            };
        recalc();
        win.addEventListener(resizeEvt, recalc, false);
    })(document, window);

网络上大多数人写法如下

<script type="text/javascript">
        (function (doc, win) {
            if (!doc.addEventListener){
                return;
            }
            var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth){
                    return;
                }
                docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
                // 此处设置在375px宽的可视区下,1rem = 20px
            };
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false); 
        })(document, window);
    </script>

稍微解释一下上面的代码
document文档对象模型 window浏览器对象模型
document.documentElement.clientWidth 获取可视区的高度
orientationchange:用户改变水平或垂直方向时触发。(浏览器窗口改变大小触发)
DOMContentload:DOM结构加载完毕时触发。

我本人喜欢第一种写法,有没有大神解释一下为什么都用下面这种写法。我个人觉得应该是加载html前就让他font-size改变,而不是等到加载完html之后在改变font-size

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2181次
    • 积分:66
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论