zoukankan      html  css  js  c++  java
  • 以rem为单位根据移动设备的分辨率动态设置font-size

    无需指定font-size的大小

    <script>
    
        // //- 设置根元素fontSize~
        // (function (doc, win) {
        //     var _root = doc.documentElement,
        //         resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
        //         resizeCallback = function () {
        //             var clientWidth = _root.clientWidth,
        //                 fontSize = 0;
        //             if (!clientWidth) return;
        //             if(clientWidth < 640) {
        //                 fontSize = clientWidth / 10;
        //             } else {
        //                 fontSize = 640 / 10;
        //             }
        //             _root.style.fontSize = fontSize + 'px';
        //         };
        //     if (!doc.addEventListener) return;
        //     win.addEventListener(resizeEvent, resizeCallback, false);
        //     doc.addEventListener('DOMContentLoaded', resizeCallback, false);
        // })(document, window);
        !
                function(a, b) {
                    function c() {
                        var b = f.getBoundingClientRect().width;
                        b / i > 1080 && (b = 1080 * i);
                        var c = b / 10;
                        f.style.fontSize = c + "px", k.rem = a.rem = c
                    }
                    var d, e = a.document,
                            f = e.documentElement,
                            g = e.querySelector('meta[name="viewport"]'),
                            h = e.querySelector('meta[name="flexible"]'),
                            i = 0,
                            j = 0,
                            k = b.flexible || (b.flexible = {});
                    if (g) {
                        console.warn("将根据已有的meta标签来设置缩放比例");
                        var l = g.getAttribute("content").match(/initial-scale=([d.]+)/);
                        l && (j = parseFloat(l[1]), i = parseInt(1 / j))
                    } else if (h) {
                        var m = h.getAttribute("content");
                        if (m) {
                            var n = m.match(/initial-dpr=([d.]+)/),
                                    o = m.match(/maximum-dpr=([d.]+)/);
                            n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((1 / i).toFixed(2)))
                        }
                    }
                    if (!i && !j) {
                        var p = a.navigator.userAgent,
                                q = ( !! p.match(/android/gi), !! p.match(/iphone/gi)),
                                r = q && !! p.match(/OS 9_3/),
                                s = a.devicePixelRatio;
                        i = q && !r ? s >= 3 && (!i || i >= 3) ? 3 : s >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i
                    }
                    if (f.setAttribute("data-dpr", i), !g) if (g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f.firstElementChild) f.firstElementChild.appendChild(g);
                    else {
                        var t = e.createElement("div");
                        t.appendChild(g), e.write(t.innerHTML)
                    }
                    a.addEventListener("resize", function() {
                        clearTimeout(d), d = setTimeout(c, 300)
                    }, !1), a.addEventListener("pageshow", function(a) {
                        a.persisted && (clearTimeout(d), d = setTimeout(c, 300))
                    }, !1), "complete" === e.readyState ? e.body.style.fontSize = 12 * i + "px" : e.addEventListener("DOMContentLoaded", function() {
                        e.body.style.fontSize = 12 * i + "px"
                    }, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function(a) {
                        var b = parseFloat(a) * this.rem;
                        return "string" == typeof a && a.match(/rem$/) && (b += "px"), b
                    }, k.px2rem = function(a) {
                        var b = parseFloat(a) / this.rem;
                        return "string" == typeof a && a.match(/px$/) && (b += "rem"), b
                    }
                }(window, window.lib || (window.lib = {}));
    </script>
    

      

  • 相关阅读:
    PHPStrom 转 VSCode 折腾记录(配置分享)
    Ubuntu 17.10/18.04使用内置指纹识别(联想T440内置Synaptics Validity Sensors)
    How to Enable Fingerprint Login In Ubuntu 19.10, 19.04
    RESTful API 中的 Status code 是否要遵守规范
    RESTful API定义及使用规范
    Google protocol buff使用
    linux shell 值coredump suid_dumpable和 gdb解析coredump文件
    linux shell 之流程控制 if if else while
    error while loading shared libraries: libXXXX.so: cannot open shared object file: No such file or directory
    Excel表格写入操作函数 C++
  • 原文地址:https://www.cnblogs.com/nullman/p/5942207.html
Copyright © 2011-2022 走看看