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

Question

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

1. 如何em用于我的响应式设计，我的意思是当我们使用%单元页面时会相应地调整它的宽度，我们怎么能em用于同样的事情。

2. 哪个好%或em。

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

Answer 1

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

假设您的正文字体大小已设置，并且您希望 480 像素移动设备的文本更小。你会在你的CSS末尾添加：

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

   p { font-size: .7em; }

}

在这里查看媒体查询！