rem.js

// 自适应代码
(function (win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 750) { // 最大宽度
            width = 750;
        }
        var rem = width / 3.75;
        docEl.style.fontSize = rem + 'px';
    }
    win.addEventListener('resize', function () {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
    refreshRem();
})(window);
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 根据设计尺寸制作rem适配增加横屏判断
    TonyYu阅读 4,363评论 0 1
  • 代码一 代码二 上面两种代码都可以实现适配不同分辨率,展示效果 引用rem.js文件,在不同终端下都能够等比例的缩放
    xinhui9056阅读 5,673评论 0 1
  • (function(doc,win){ var docEl = doc.documentElement,resiz...
    H5日常记阅读 3,280评论 0 2
  • 最近在做移动端的微站项目,既然是移动端,那么一个不可忽视的话题就是不同设备之间的适配。目前市场上有各种品牌的手机,...
    振礼硕晨阅读 27,913评论 3 41
  • 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表、图...
    吃萝卜的小兔子阅读 7,475评论 0 0

友情链接更多精彩内容