有很多资源鼓励在媒体查询中使用 em 而非像素。然而，他们都没有轻易解释对此明显的疑问：
如果我有两个 div 并且我想在类似 iPhone4 的设备上隐藏其中一个，我该如何使用基于 em 的媒体查询呢？设备分辨率为 640x960 像素。
在每篇文章中都有一条说明通常 1em = 16px。但既然不确定，我为什么要转换为 ems 并冒着破坏我的设计的风险呢？如果用户将他的默认字体更改为 20px 怎么办？还是 10 像素？我的 div 将隐藏得太早或太晚。
来自基金会的示例：
/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) { }
我如何确定它确实是 641 像素而不是 1282 像素？为什么有人会使用如此不可靠的东西而不是旧的好像素？
【问题讨论】：
标签： html css responsive-design grid media-queries
首先，用户无法更改em 中的大小，因为这是无法更改的浏览器设置。因此，充其量它可能会因浏览器而异，但我不知道与此标准有什么不同。出于这个原因，它可以被认为是非常安全的使用。
但对于媒体查询，我建议使用rem units。 em 单位是组件中字体大小的首选，因为它根据父 DOM 元素进行相对缩放。而rem 单位可以很好地调整根元素的大小（宽度、高度......）。
【讨论】：
px 是一个绝对测量单位（如 in、pt 或 cm），它也 恰好是单位的 1/96。因为它是 绝对测量，可以在您想要定义的任何时候使用 某物具有特定的大小，而不是与 诸如浏览器窗口大小或字体大小之类的其他内容。
em 不是绝对单位 - 它是相对于 当前选择的字体大小。除非你已经覆盖了字体样式 使用绝对单位（例如 px 或 pt）设置字体大小，这 会受到用户浏览器或操作系统中字体选择的影响 如果他们制作了一个，那么将 em 用作 长度的通用单位，除非您特别希望它缩放 随着字体大小的缩放。
基于此，最准确的选择是根据您的要求使用px 而不是em，但您始终可以重新定义字体并改用rem，这对于响应式网站来说更好，一起使用与百分比。这是对您添加到网站的每个元素的判断问题，当然，还需要进行大量测试以确保它在任何分辨率和设备上看起来都不错并且可以完美运行。
我个人更喜欢这样做：
rem 进行字体和媒体查询当然，有时我必须根据需要使用像素或更改一些“默认”规则。正如我之前所说，这也是一个判断您的需求和最佳选择的问题。
注意：em 单位是相对于父级的字体大小的。 rem 单元是相对于根元素或 html 元素的。这意味着我们可以在 html 元素上定义单个字体大小，并将所有 rem 单位定义为其中的百分比。
【讨论】：