zoukankan      html  css  js  c++  java
  • js 抓取屏幕宽度设置字体大小 rem

    var doc = window.document
    var docEl = doc.documentElement
    var tid

    function refreshRem () {
    var width = docEl.getBoundingClientRect().width
    if (width > 540) { // 最大宽度
    width = 540
    }
    var rem = width / 7.5 // 将屏幕宽度分成750份,1份为1rem 375屏刚好0.5px
    docEl.style.fontSize = rem + 'px'
    }

    window.addEventListener('resize', function () {
    clearTimeout(tid)
    tid = setTimeout(refreshRem, 300)
    }, false)
    window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
    clearTimeout(tid)
    tid = setTimeout(refreshRem, 300)
    }
    }, false)

    refreshRem()

    (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 = 20 * (clientWidth / 320) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  • 相关阅读:
    day29 作业
    day 29 线程
    day28 进程
    day27 服务端 和客户端
    day26 作业
    day26 网络编程
    java基础 反射
    python 计时
    mongodb 批量插入唯一索引冲突
    js hook
  • 原文地址:https://www.cnblogs.com/adouwt/p/7794665.html
Copyright © 2011-2022 走看看