zoukankan      html  css  js  c++  java
  • 移动端适配rem.js

    rem.js

    (function (doc, win) {
        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';
                }
                var html = document.getElementsByTagName('html')[0];
                var settedFs = settingFs = parseInt(100 * (clientWidth / 750));
                var whileCount = 0;
                while (true) {
                    var realFs = parseInt(window.getComputedStyle(html).fontSize);
                    var delta = realFs - settedFs;
                    //不相等
                    if (Math.abs(delta) >= 1) {
                        if (delta > 0)
                            settingFs--;
                        else
                            settingFs++;
                        html.setAttribute('style', 'font-size:' + settingFs + 'px!important');
                    } else
                        break;
                    if (whileCount++ > 100)
                        break
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    View Code

    使用时,引入rem.js

    1rem=100px

    用rem代替px写样式

  • 相关阅读:
    收听网络状态广播
    常用工具类
    BroadcastReceiver study
    NIO2
    ip route,ip rule, iptables和docker的端口映射
    Hystrix使用小结
    mysql CPU占用高
    mysql隔离级别与锁,接口并发响应速度的关系(2)
    TOMCAT调优内容
    jvm 锁Lock
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/13909811.html
Copyright © 2011-2022 走看看