[分享]css单位em如何实现响应式

在CSS中有多种单位，其中em是一种非常常用的单位。在响应式设计中，使用em单位可以很好地实现响应式设计。所谓响应式设计，就是页面能够根据设备的屏幕大小自动调整布局和字体大小，以便更好地适应不同的设备...

在CSS中有多种单位，其中em是一种非常常用的单位。在响应式设计中，使用em单位可以很好地实现响应式设计。

所谓响应式设计，就是页面能够根据设备的屏幕大小自动调整布局和字体大小，以便更好地适应不同的设备。在网页设计中，可以使用em单位实现响应式设计，因为em单位可以根据父元素的字号来动态改变自己的大小。

.box {
  font-size: 16px; /* 设置父元素字号 */
}

.box p {
  font-size: 0.8em; /* 子元素字号为父元素的0.8倍 */
} 

从上面的代码可以看到，我们设置了一个.box类作为父元素，设置了字号为16px。然后在.box下面的p标签中，我们设置了字号为0.8em，这意味着子元素的字号为父元素字号的0.8倍，也就是12.8px。

当我们将这个响应式设计的页面在不同的设备上浏览时，由于em单位是相对于父元素字号来计算的，所以字体大小也会相应地随着父元素字号的改变而响应式地调整。

总而言之，使用em单位可以很好地实现响应式设计，因为它可以根据父元素字号来动态改变自己的大小，适应不同的设备屏幕大小。