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

Closed. This question is opinion-based。它当前不接受答案。












                            想改善这个问题吗？更新问题，以便editing this post用事实和引用来回答。

                        5年前关闭。



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

如何在响应式设计中使用em，我的意思是，当我们使用%单位页时，它会相应地调整其宽度，而对于同一件事，我们如何使用em。
%或em哪个更好。

实际上我不确定如何使用em使页面完全响应。如果您可以通过一些链接或小型演示帮助我，那将是很棒的。

最佳答案

您可以结合使用em和媒体查询来根据屏幕尺寸设置字体大小。

假设已设置您的正文字体大小，并且您想要480px移动设备使用较小的文本。您可以在CSS的末尾添加：

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

   p { font-size: .7em; }

}

在这里查看media queries！

关于css - EM单元如何有助于响应式设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21656272/

上一篇：javascript - 在联系表上加载隐藏的 Div

下一篇：javascript - 使 <a> 中的图像或 div 免于成为链接

相关文章：

android - Android 版 Chrome 中的网站文字更大

html - wrapper 不适合 100% 宽度

html - 相关网站布局不适用于段落

css - 如何制作显示:table-cell div cover adjoining table-cell divs?

css - 如果我更改根字体大小，则填充/边距不能正确缩放。怎么来的？

css - 我们仍然有理由使用em单位吗？

css - em单位和百分比之间有什么区别？

css - 在 IE11 中是否有纯 CSS 的方法来进行背景模糊？