CSS3中的rem单位

最新推荐文章于 2023-11-16 17:35:07 发布

felix930

最新推荐文章于 2023-11-16 17:35:07 发布

阅读量2.8k

点赞数 9

分类专栏： CSS 文章标签： css3 css em rem

本文链接：https://blog.csdn.net/H_O_L_Y/article/details/51852954

版权

CSS 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

rem是CSS3新引入的单位，它改良了往期版本中em单位使用不方便的缺点。（如果想了解em单位的更多信息，可以查看之前的文章：CSS中的em单位）

一、em单位带来的问题

我们知道，em的长度是根据元素自身的font-size大小来确定的：

1em = 元素中文本的1个垂直高度

如果元素自身没有设置font-size，那么em的长度将根据父元素的font-size来确定。另外，元素自身的font-size如果使用em作为单位，那么该em的长度也是根据父元素的font-size来确定的。这听起来就很复杂了。来看一个例子：

<style>
    body{
        font-size: 16px;
    }
    .div1 {
        font-size: 2em;
    }
    .div2 {
        font-size: 0.02em;
    }
    .div3 {
        font-size: 5em;
    }
    .div4 {
        font-size: 4em;
    }
    .div5 {
        font-size: 2.5em;
    }
</style>
<body>
    <div class="div1">
        <div class="div2">
            <div class="div3">
                <div class="div4">
                    <div class="div5">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

请快速说出每个div中的文本大小应该是多少像素？

可以看到，在稍微复杂的web文档中使用em作为单位，不仅表现不直观，而且计算复杂。即使每一层都经过精心计算，也难免产生疏漏造成意料之外的问题。

那么……能不能改变“em需要依附父元素计算长度”这一弊端呢？答案是肯定的。

二、CSS3中的新救星

为了解决上面的问题，rem单位应运而生。rem不是依据父元素——而是依据根元素（root element）来确定其长度。这里所说的根元素（root element）毫无疑问就是web文档中的html元素。也就是说，无论嵌套层级有多深，rem都是根据<html>的font-size来确定长度的。eg:

<style>
    html {
        font-size: 16px;
    }
    .div1 {
        font-size: 3rem;    /* 3rem = 16px * 3 = 48px */
    }
    .div2 {
        font-size: 0.5rem;  /* 0.5rem = 16px * 0.5 = 8px */
    }
</style>
<body>
    <div class="div1">
        <div class="div2">
        </div>
    </div>
</body>

下面的例子同时使用了em和rem作为单位，很容易能看出两个单位之间的区别：

<style>
    html {
        font-size: 16px;
    }
    body {
        font-size: 8px;
    }
    .div1 {
        font-size: 3rem;    /* 3rem = 16px * 3 = 48px */
        width: 10rem;   /* 10rem = 16px * 10 = 160px */
        height: 20em;   /* 20em = 48px * 20 = 960px */
    }
    .div2 {
        width: 10rem;   /* 10rem = 16px * 10 = 160px */
        height: 10em;   /* 10em = 48px * 10 = 480px */
    }
</style>
<body>
    <div class="div1">
        <div class="div2">
        </div>
    </div>
</body>

上例中需要注意的地方：

div.div1的font-size是3rem，参考文本为根元素html的font-size；
div.div1的height是20em，因为自身有font-size属性，因此参考文本为自身的font-size；
div.div2的width是10rem，参考文本为根元素html的font-size；
div.div2的height是10em，参考文本为其父元素div.div1的font-size.

三、更方便的使用rem

rem单位相比em已经带来了很多便利，但有时仍然不够直观。

<style>
    html {
        font-size: 16px;
    }
    div {
        font-size: 5.65rem;
    }
</style>
<body>
    <div></div>
</body>

请快速说出div的font-size是多少像素？

为了解决这种问题，可以为根元素指定一个更容易计算的font-size，根据经验，一般将其设置为62.5%（浏览器的默认字体大小为16px，10px = 16px * 62.5%）。这样一来，想要完成px到rem的转换，只要将px的值除以10即可。

<style>
    html {
        font-size: 62.5%;   /* 10px */
    }
    div {
        font-size: 2.4rem;  /* 24px */
        width: 64rem;   /* 640px */
        border: 0.1rem solid #ccc;  /* 1px */
    }
</style>
<body>
    <div class="div1">
        <div class="div2">
        </div>
    </div>
</body>

四、兼容性

由于rem是CSS3新引入的单位，因此存在兼容性问题。
这里写图片描述
*IE 9和IE 10不支持在font样式或伪元素中使用rem

对于IE 6-8，使用老牌的px来代替rem。

felix930

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
CSS3中的rem单位

rem是CSS3新引入的单位，它改良了往期版本中em单位使用不方便的缺点。（如果想了解em单位的更多信息，可以查看之前的文章：CSS中的em单位）一、em单位带来的问题我们知道，em的长度是根据元素自身的font-size大小来确定的：1em = 元素中文本的1个垂直高度如果元素自身没有设置font-size，那么em的长度将根据父元素的font-size来确定。另外，元素自身的font-size如
复制链接

扫一扫