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);
  • 相关阅读:
    Asp.net MVC 利用 Nopi 导出 Excel
    React 中 调用 Asp.net WebApi
    Node.js mysql 连接池使用事务自动回收连接
    __far和__near的小问题
    注册博客园了,以后在这里写写随笔。
    Electron客户端开发入门必备的知识点
    公司组织构架的三大类型
    经济学中的人性抉择(下)
    经济学中的人性抉择(上)
    模拟音乐播放器播放条样式
  • 原文地址:https://www.cnblogs.com/liubingyjui/p/13409673.html
Copyright © 2011-2022 走看看