zoukankan      html  css  js  c++  java
  • 可伸缩布局方案flex

    /**可伸缩布局方案
     * rem计算方式:设计图尺寸px / 100 = 实际rem  例: 100px = 1rem
     */
    !function (window) {

        /* 设计图文档宽度 */
        var docWidth = 1920;

        var doc = window.document,
            docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

        var recalc = (function refreshRem () {
            var clientWidth = docEl.getBoundingClientRect().width;

            docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 30), 8.55) * 5 + 'px';

            return refreshRem;
        })();

        /* 添加倍屏标识,安卓倍屏为1 */
        docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);

        if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
            /* 添加IOS标识 */
            doc.documentElement.classList.add('ios');
            /* IOS8以上给html添加hairline样式,以便特殊处理 */
            if (parseInt(window.navigator.appVersion.match(/OS (d+)_(d+)_?(d+)?/)[1], 10) >= 8)
                doc.documentElement.classList.add('hairline');
        }

        if (!doc.addEventListener) return;
        window.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);

    }(window);

  • 相关阅读:
    类定义(课下选做)
    结对项目第一周
    迭代和JDB
    JAVA 第五周学习总结
    JAVA 第四周学习总结
    JAVA 第三周学习总结
    springcloud-provider-consumer-register
    springcloud-eureka
    springBoot-打包
    spring-Scheduler
  • 原文地址:https://www.cnblogs.com/hlyin/p/9359801.html
Copyright © 2011-2022 走看看