初始化html font-size

最新推荐文章于 2024-01-15 16:13:05 发布

转载最新推荐文章于 2024-01-15 16:13:05 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuqiyun/p/11554966.html

本文介绍了一种使用REM单位实现响应式布局的方法，通过JavaScript动态调整根元素字体大小，使页面元素在不同屏幕尺寸下保持一致的比例。适用于前端开发中需要适配多种设备的场景。

(function () {
    var docEl = document.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            //这里是假设在640px宽度设计稿的情况下，1rem = 20px；可以根据实际需要修改
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
    recalc();
    if (!document.addEventListener) return;
    window.addEventListener(resizeEvt, recalc, false);
})();