1、响应式尺寸单位

在现代 web 开发中，由于设备的多样性和屏幕尺寸的不断变化，响应式布局成为了一个麻烦、但是又非常重要的技术追求。因此，在技术方案的学习上，为了应对各种不同的响应式需求，我们要学习大量的基础技术方案。好在在 css 中，这些方案都开始逐渐趋于成熟。在 css 的技术方案中，提供了大量的响应式尺寸单位来解决不同的响应式需求。

响应式单位：指的是会随着参考对象的改变而自动调整的尺寸单位。

常见的响应式单位包括：

• em：相对于父元素的字体大小
• rem：相对于根元素（html）的字体大小
• %：相对于父元素的百分比
• vw/vh：相对于视口宽度/高度的百分比
• vmin/vmax：相对于视口最小/最大尺寸的百分比
• ...

本文主要是来介绍一下 css 中的第一个响应式尺寸单位： em

2、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;

3、观察父元素字体大小变化

这是一个改变父元素的字体大小，然后，然后对子元素相关的 em 尺寸造成影响的案例。

1
.child {
2
  margin: 1em;
3
  height: 8em;
4
}