zoukankan      html  css  js  c++  java
  • rem自动计算

     写法一:

    //rem自动计算
    (function (designWidth, maxWidth, viewWidth) {
        var doc = document,
            win = window,
            docEl = doc.documentElement,
            remStyle = document.createElement("style"),
            tid;
    
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            maxWidth = maxWidth || 540;
            width > maxWidth && (width = maxWidth);
            var rem = width * 100 / designWidth;
            if (viewWidth == null || viewWidth < maxWidth) {
                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
            } else {
                remStyle.innerHTML = 'html{font-size:' + rem + 'px; max-' + viewWidth + 'px; margin: auto}';
            }
        }
    
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(remStyle);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(remStyle);
            doc.write(wrap.innerHTML);
            wrap = null;
        }
        refreshRem();
    
        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);
    
        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function (e) {
                doc.body.style.fontSize = "16px";
    
            }, false);
        }
    })(750, 750);

    写法二:

    //修改页面title
    var pageTitle=document.getElementsByTagName("title")[0].innerHTML;
    if(location.href.indexOf("index.html")>-1 || location.href.indexOf("html")==-1){
        document.getElementsByTagName("title")[0].innerHTML="一汽-大众商城-一汽-大众官方电商平台-只为简单汽车生活";
    }
    //微信JSSDK
    document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>');
    //rem自动计算
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };
    
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    写法三:

    //rem自动计算
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };
    
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  • 相关阅读:
    作为一个蒟蒻谈一点考试经验(总结)
    Codeforces Round #517 Div. 2/Div. 1
    Codeforces访问提速攻略(小技巧)
    基数排序模板(基数排序,C++模板)
    k短路模板(洛谷P2483 [SDOI2010]魔法猪学院)(k短路,最短路,左偏树,priority_queue)
    洛谷P4907【CYH-01】小奔的国庆练习赛 :$A$换$B$ $problem$(DFS,剪枝)
    BSGS及扩展BSGS总结(BSGS,map)
    FWT模板(洛谷P4717 【模板】快速沃尔什变换)(FWT)
    洛谷CF264D Colorful Stones(子序列匹配,思维)
    洛谷SP22343 NORMA2
  • 原文地址:https://www.cnblogs.com/liubingyjui/p/13409673.html
Copyright © 2011-2022 走看看