在现代 web 开发中，由于设备的多样性和屏幕尺寸的不断变化，响应式布局 成为了一个麻烦、但是又非常重要的技术追求。因此，在技术方案的学习上，为了应对各种不同的响应式需求，我们要学习大量的基础技术方案。好在在 css 中，这些方案都开始逐渐趋于成熟。在 css 的技术方案中，提供了大量的响应式尺寸单位来解决不同的响应式需求。
响应式单位：指的是会随着参考对象的改变而自动调整的尺寸单位。
常见的响应式单位包括：
em
：相对于父元素的字体大小
rem
：相对于根元素（html）的字体大小
%
：相对于父元素的百分比
vw
/vh
：相对于视口宽度/高度的百分比
vmin
/vmax
：相对于视口最小/最大尺寸的百分比
本文主要是来介绍一下 css 中的第一个响应式尺寸单位
： em
em
的参考对象为该元素本身的字体大小
。
例如，下面这个例子，有一个元素 div
，我们设置其字体大小为 14px
，此时，其他的属性尺寸使用 em
来表示。那么有如下换算
1
1em = 14px
2
0
.5em
= 7px
3
0
.6em
= 8
.4px
演示效果如下
1
.supercss_em_03_box {
2
font
-
size
: 14px;
3
border
: 0.5rem solid #
000
;
4
padding
: 1rem;
5
border
-
radius
: 0.6em;
6
}
该元素的字体大小，如果没有设置
16px
例如，当父元素字体为 16px
时，那么对于子元素而言
1
1em = 16px
2
2em = 32px
如果我们将父元素字体大小设置为 20px
，那么对于子元素而言
1
1em = 20px
2
2em = 40px
这样，我们可以只需要更改父元素的字体大小，就可以控制子元素的大小发生变化。
观察一下这个案例
10
import
'./index.css '
20
30
function
Demo01
() {
40
return
(
50
<
div
className
=
'supercss_em_01_parent '
>
60
I 'm parent div set font-size to 20px
70
<
div
className
=
'child '
>
80
I 'm child div set font-size to 2em, so my font-size is 40px
90
</
div
>
10
</
div
>
11
);
12
}
13
14
export default
Demo01;
这是一个改变父元素的字体大小，然后，然后对子元素相关的 em 尺寸造成影响的案例。
1
.child {
2
margin
: 1em;
3
height
: 8em;
4
}
ok，学习了 em
的基础知识之后，接下来，我们要考虑在实践中如何使用 em