rem-详细理解笔记

一、rem是什么

    rem是相对于根元素html字体大小来计算的；

    rem（font size of the root element）与em（font size of the element）区别，em根据其父元素字体大小设置，rem是根据网页的根元素（html）设置字体大小。

二、rem兼容性（兼容性还是不错的）

    IE9+、Chrome、Safari、Firefox、Opera 的主流版本都支持rem 

    IE8及以下兼容rem可使用使用rem.js这个插件 。

三、为什么使用rem，其布局优点是什么

   rem能等比例适配所有屏幕。

   无需考虑不同尺寸屏幕的手机，同PC端写法相同，只需要设置好参数。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{padding: 0; margin: 0;}
    html{ font-size: 10px; }  
    .btn {
        display: block;
        margin: 100px 100px;
        width: 9rem;
        height: 6rem;
        line-height: 6rem;
        font-size: 3rem; 
        background: #6AAAEA;
        color: #fff;
        border-radius: .3rem; 
        text-align: center;    
    }
    </style>
</head>
<body>
     <div class="btn">嗨喽Hello</div>
</body>
</html>

从上面这段代码可以看出，子元素的大小是根据html根元素设置的font-size值改变的。其对应的大小，我在别的博客上看到的都是以根元素为倍数，也就是用根元素的值乘以当前元素属性值就是当前元素的实际值；但我自己在谷歌上运行得到的答案与他们的有些出入，实际值=倍数（根元素所设置的值）*当前元素属性css写的rem值*1.2，没错1.2.运行中多了一个1.2倍，可输入上边代码实际运行一下。

四、如何使用rem

       1. 根据设计图自己去计算（如：Photoshop查看字体，计算）

       2. 使用 Sass

       3. 使用 Less 

 五、具体代码书写步骤

（1）主动设置，通过媒体查询

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

（2）自动设置

1. 在HTML文件页面的head标签中加入一个<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 创建一个js文件，放入一下代码；或在html文件底部建立一和<script>标签放入代码也可。

(function(designWidth, maxWidth) { //两个参数可以传入，desigWidth为UI图纸宽度，maxWidth为UI设计稿的最大宽度值
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;
 
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width; //获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+两个padding+两个border。
        maxWidth = maxWidth || 540; //是否有maxWidth这个参数的输入，有则maxWidth=传参，否则maxWidth=540
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }
 
    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    refreshRem();//写在if后的原因，此函数要在viewport设置好才执行，否则会运行两次
 
    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止运行两次
        tid = setTimeout(refreshRem, 300);
    }, false);
 
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { //浏览器后退的时候从新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
 
    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);//UI设计图纸的宽写在这里，和最大允许宽度

六、 rem存在的问题

      1、 border:0.01rem solid #ccc;  边框的0.01rem在手机上会看不见，所以边框的0.01rem建议使用1px替代。

      2、 background-size使用rem无效，可使用百分比转而无需适应rem

 

参考文章：

本文为自己知识点搜索整理，若有侵权麻烦联系告知，可删除本文章。谢谢(*￣︶￣)

posted @ 2018-08-07 17:01  IT记录  阅读(786)  评论(0)  编辑  收藏  举报