手机自适应

来源：互联网发布：sql 删除表中数据编辑：程序博客网时间：2024/04/30 05:30

(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