当前位置:澳门新葡亰网站所有平台 > www.7415.com > 关于rem的学习

关于rem的学习

文章作者:www.7415.com 上传时间:2019-09-14

到此,总算是弄精晓了rem和px的不相同之处

 

www.7415.com,bug 1:举个例子reset里并从未设置网址文字字号,所以作者会在body里一贯写font-size:1.2rem,让整个网页字号为12px。但在Android的Chrome里行不通,依然遵从16px来测算而不是本身手动设置10px总括。所以要想给全部网页设置暗中同意字号,最惨酷的措施便是直接在body里设置em也许px字号,举个例子body{font-size:1.2em}可能12px,推荐em。body直接接轨html的字号,能够直接完成rem的效果与利益。然后其他省方用rem是没难题的。

js动态计算rem值

 

网页常见单位px、em、rem;当中rem是css3新出的单位,官方网址是那般定义的:“font size of the root element”,意思是:相对长度单位,相对于根成分(即html成分)font-size统计值的翻番。

bug 2:因为Chrome设置了细微字号为12px,导致假诺在宽高、行高、边距等地点用rem,即使在html那设置了10px,但暗许还是会依照12px来计量,所以实际会偏大。提议rem只是在字号上用比较好。

网络搜索了有个别有关px和rem有啥不一致的作品,超过59%都以说rem在针对客户使用浏览器缩放的时候有较好的心得,而px会在浏览器缩放的时候破坏大家网页原有的布局。可是经过自家自个儿的试验,发掘并从未这么些难题;也等于说借使只是对准浏览器缩放来讲,用px和rem是绝非怎么分别的;

/**
 * [以iPhone6的设计稿为例js动态设置文档 rem 值]
 * @param  {[type]} doc [文档元素]
 * @param  {[type]} win [window]
 * @return {[type]}     [description]
 */
(function(doc, win) {
    var docEl = doc.documentElement;
    var resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var remcalc = function() {
        var clientWidth = docEl.clientWidth;
        var fontValue;
        if (!clientWidth) return;
        fontValue = ((62.5 * currClientWidth) / 375).toFixed(2);
        fontValue = fontValue > 106.67 ? 106.67 : fontValue;
        window.baseFontSize = fontValue;
        docEl.style.fontSize = baseFontSize + 'px';
    };
    if (!docEl.addEventListener) return;
    win.addEventListener(resizeEven, remcalc, false);
    doc.addEventListener('DOMContentLoaded', remcalc, false);
})(document, window);

新兴在此地看到了那样的一段文字  >>链接地址:   注:此段转发自西门的后花园

本文由澳门新葡亰网站所有平台发布于www.7415.com,转载请注明出处:关于rem的学习

关键词: