CSSS长度单位rem
em是CSS3新引入的单位,它改良了往期版本中em单位使用不方便的缺点。(如果想了解em单位的更多信息,可以查看之前的文章:CSS中的em单位)
一、em单位带来的问题
我们知道,em的长度是根据元素自身的font-size大小来确定的:
1em = 元素中文本的1个垂直高度
- 1
- 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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
请快速说出每个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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
下面的例子同时使用了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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
上例中需要注意的地方:
- 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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
请快速说出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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
四、兼容性
由于rem是css3新引入的单位,因此存在兼容性问题。
*IE 9和IE 10不支持在font样式或伪元素中使用rem
对于IE 6-8,使用老牌的px来代替rem