我正在使用 CSS @media 查询编写我的第一个响应式布局。我已将其添加<meta name="viewport" content="width=device-width">到我的 html 中，因此我有一系列严格的基于设备宽度的字体大小布局。而且，我正在使用em来（希望）给最一致的浏览器调整大小html, body {width/height:100%; font-size: 1em}。
在我最小的情况下，我想将标签放在< 0.5em 范围内的<h2>相对较小的em上。但是，一旦我低于该数量，它就不再调整大小。我能看到的唯一选择是切换回像素并使用一些小的 10px 量。
也许我可以换一种方式思考这个问题？或者，也许我在em的规格中遗漏了一些东西。任何建议表示赞赏。
浏览器都有一个基本的字体大小。一般来说，应该在 14px 和 18px 之间。如果您不指定正文字体大小，则 1em 将等于默认字体大小。您的示例对我有用，但是，0.5em = 14-18px 的 50% => 7-9px。这太小而无法正确阅读。
参考：http ://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/
您可以指定更大的正文字体大小（例如，24 像素），在这种情况下，0.5em 将等于 12 像素，虽然很小，但仍然可以。
附加说明：小心设置
html, body {
font-size: 1em;
}
对我来说（在谷歌浏览器中），这产生了不同（更小）的字体大小
body {
font-size: 1em;
}
大多数浏览器都有一个不能被覆盖的“最小字体大小”设置。在 Opera 中，默认的最小尺寸是 9px。由于正文的默认字体大小为 16 像素，因此 .5em 将计算为 8 像素。