zoukankan      html  css  js  c++  java
  • rem和px

    做过一段时间的H5页面,但是对于rem与px的换算还是比较模糊,总是引用一段脚本,也没有深究过为什么,就稀里糊涂的用了,遇到一些细微的地方,总是不知道是什么原因导致的,我总是只要能完成效果就行,全然不顾其他。下面来说说我常用的一段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>=640){
                            docEl.style.fontSize = '100px';
                        }else{
                            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                        }
                    };
            
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window)

    说说这段代码干了什么?

    首先orientationchange事件是当终端方向发生改变时触发的事件,详细请看http://www.runoob.com/jquerymobile/event-orientationchange.html

    resize事件是当浏览器窗口大小发生变化时触发的事件,详细请看http://www.runoob.com/jquery/event-resize.html

    当前屏幕大小大于等于640的时候,统一设置html的font-size为100px;否则用100/(当前屏幕宽度/640),给window绑定此方法;总的,这段代码就是通过获取不同屏幕的大小,设置根元素的font-size。

    注意:这里为什么以640作为分界线,我到目前还不是很明白,猜测大概是1物理像素=2设备独立像素,以iphone5的宽度作为基数*2得来的。希望网友可以解答我的疑问。

    还有,从网上看到一些物理像素、设备独立像素、ppi(像素密度)等的换算,看的稀里糊涂,需要静下心来仔细研究下了。

    /**
     * YDUI 可伸缩布局方案
     * rem计算方式:设计图尺寸px / 100 = 实际rem  【例: 100px = 1rem,32px = .32rem】
     */
    !function (window) {
    
        /* 设计图文档宽度 */
        var docWidth = 750;
    
        var doc = window.document,
            docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    
        var recalc = (function refreshRem () {
            var clientWidth = docEl.getBoundingClientRect().width;
    
            /* 8.55:小于320px不再缩小,11.2:大于420px不再放大 */
            docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 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);

    之前同事给的代码,说比上面那段代码好用,还没用

     
  • 相关阅读:
    “增绿”——气候变化减排之外中国提出新方法
    当资本遇见万科章程
    [转]最简单实现跨域的方法:用 Nginx 反向代理
    活在雾霾下
    为石墨烯弄套产业政策?且慢!
    2016年的A股变数:IPO重启、注册制与国企改革
    被指“造假” 京东喊冤 到底谁在卖“真褚橙”?
    在管理教练与管理之间寻找平衡
    聪明的CEO如何将战略付诸执行
    苹果公司如何推动整个产业的前进
  • 原文地址:https://www.cnblogs.com/wj19940520/p/6951419.html
Copyright © 2011-2022 走看看