rem-详细理解笔记

时间 2019-11-12

标签 rem 详细理解笔记繁體版

原文原文链接

1、rem是什么

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

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

2、rem兼容性（兼容性仍是不错的）

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

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

3、为何使用rem，其布局优势是什么

rem能等比例适配全部屏幕。浏览器

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

<!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倍，可输入上边代码实际运行一下。函数

4、如何使用rem

1. 根据设计图本身去计算（如：Photoshop查看字体，计算）布局

2. 使用 Sass字体

3. 使用 Less spa

5、具体代码书写步骤

（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设计图纸的宽写在这里，和最大容许宽度

6、 rem存在的问题

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

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

参考文章：

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