css - 为什么 em 字体大小不会在响应式网格上调整大小？

Question

我创建了一个响应式网格并使用 em 作为字体大小来调整文本大小，但我一定没有完全理解 em 的工作原理，因为没有调整文本大小。

现场: http://www.rubytuesdaycreative.co.uk/testsite/shop.html

根据 Ethan Marcottes 的书，我将正文字体设置为 font-size:100%，然后在上面链接的页面上的 cpation 中将文本制作为 2ems - 因此将基本大小加倍。 ..我做错了吗？它似乎根本没有改变。

http://jsfiddle.net/jm3sK/

Answer 1

我认为您正在寻找的是@media查询。 Em 不是一个会根据浏览器宽度调整大小的魔法子弹单元。它是一个相对单位。

如果您希望任何 CSS 根据浏览器宽度更改，请使用 @media queries .

em 在这种情况下很有用，因为您只需更改一个值 (body{font-size}) 即可缩放页面的所有其余部分。因为它们是相对的，而不是因为浏览器改变了。您可以一起使用这些技术。

这是一个快速 example .调整窗口大小。

body{font-size:100%;}
i{font-size: 2em;}


@media screen and (min-width: 500px) {
    body{font-size: 150%;}
}

@media screen and (min-width: 700px) {
    body{font-size: 200%;}
}