EM单元如何有助于响应式设计

Question

我正在尝试了解如何使用em单元进行响应式设计，我已经搜索了很多关于它的信息。我从这些页面中理解的是em是一个相对单位，如果你定义你的正文字体大小，它将等于1em。但我仍然感到困惑：

1. 如何在我的响应式设计中使用em，我的意思是当我们使用%单位页面相应地调整其宽度时，我们如何才能将em用于同一事物

2. 哪一个很好%或em。

实际上我不确定如何使用em来使页面完全响应。如果你可以帮我一些链接或小型演示，那就太好了。

Answer 1

您可以将em与媒体查询结合使用，根据屏幕大小设置字体大小。

假设您的正文字体大小已设置，并且您希望480px移动设备的文本较小。你会在你的CSS结束时添加：

@media only screen and (max-width: 480px) {

   p { font-size: .7em; }

}

在这里查看media queries！