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);
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 根據(jù)設計尺寸制作rem適配增加橫屏判斷
    TonyYu閱讀 922評論 0 1
  • 代碼一 代碼二 上面兩種代碼都可以實現(xiàn)適配不同分辨率,展示效果 引用rem.js文件,在不同終端下都能夠等比例的縮放
    xinhui9056閱讀 1,799評論 0 1
  • (function(doc,win){ var docEl = doc.documentElement,resiz...
    H5日常記閱讀 496評論 0 2
  • 最近在做移動端的微站項目,既然是移動端,那么一個不可忽視的話題就是不同設備之間的適配。目前市場上有各種品牌的手機,...
    振禮碩晨閱讀 27,965評論 3 41
  • 當初始的 HTML 文檔被完全加載和解析完成之后,DOMContentLoaded事件被觸發(fā),而無需等待樣式表、圖...
    吃蘿卜的小兔子閱讀 2,696評論 0 0

友情鏈接更多精彩內(nèi)容