zoukankan      html  css  js  c++  java
  • 移动端应用rem定义相对长度单位

    rem是根据根元素,也就是html的字体大小来计算被定义元素的大小,而根元素的字体大小取绝于屏幕宽度,相应的JS代码:

        (function (doc, win) {
            var fs = document.body.clientWidth / 750 * 28;
            fs = fs > 24 ? 24 : fs;
            fs = fs < 12 ? 12 : fs;
            document.documentElement.style.fontSize = fs + "px";
    
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 750) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };
    
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

    喜欢的话,请点赞,转发、收藏、评论,谢谢!
  • 相关阅读:
    【leetcode刷题笔记】Best Time to Buy and Sell Stock II
    【leetcode刷题笔记】Reverse Integer
    JAVA中的NIO(二)
    标准I/O
    margin的理解
    JAVA中的NIO(一)
    IO模型
    linux网络命令
    linux用户管理命令
    linux中的帮助命令
  • 原文地址:https://www.cnblogs.com/johnjackson/p/12493656.html
Copyright © 2011-2022 走看看