问题标签 [em]

我正在使用 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的规格中遗漏了一些东西。任何建议表示赞赏。

I'm having trouble with my understanding of how em should work in CSS. I'm trying to get an element (div in this case) to scale the same way the font does. I've narrowed my problem statement down as small as I can.

This seems to scale correctly in IE, FF, and Chrome, when I change body { font-size: 100%; } to any other percent.

What I'm expecting is what I see in a computer browser the div and the text are the exact same length. However, when I check this with my android smart phone the text is quite a bit wider than the div.

I would expect the div under the text to be the same width as the text even though it's scaled.

Any ideas what I'm doing wrong or where my assumption is wrong?

我正在尝试设计一个响应式布局，并且我正在使用一种技巧来更轻松地使用 EM。在我的身体里，我有这个： body {font-size: 10px}。我的问题是：这会改变 EM 的工作方式吗？如果我设置p {font-size: 1em}它是 10 像素，不管你的屏幕尺寸如何？

我正在开始一个新项目，并认为我会在之前给出 em，但我注意到当使用 em 用于填充、边距、行高等（除字体之外的任何内容）时，浏览器无法正确计算它们。

例子：

我使用 Firebug 使用像素快速定位元素，然后使用公式像素大小/基本字体在我的样式表中翻译它们。所以 25px / 16px = 1.5625

当我刷新浏览器时，元素出现了几个像素，似乎我必须向上或向下舍入，或者在某种情况下它真的出现了！

是只有我还是有其他人注意到或有解决方案？

答：我的基本字体错了！！

如果我font-size在body元素上设置 a，那么该大小也会是 1em 吗？

换句话说，如果我这样做：

我可以确定我使用 1em 的任何地方都等于 16px 吗？

如果上述方法不正确，我还应该如何设置基本字体？

抱歉，如果基本字体不是正确的术语。我不确定这种技术被称为什么。我相信它类似于重置样式表，它会覆盖浏览器的默认样式。

使用以下 CSS：

... * 选择器中的属性工作正常 - 它们适用于所有类；但是，如果我将 font-size 移动到那里，文本就会变成暴龙的比例。您可以通过将字体大小从单个类移动到 * 类在这里看到这一点：http: //jsfiddle.net/NvTvr/8/

为什么会这样？

更新

所以这是要走的路，然后：

...ETC。（在颜色类中没有指定字体大小）；如http://jsfiddle.net/NvTvr/10/中所见

考虑以下 CSS：

然后这个标记...

为什么<em>在 Gill Sans 中显示？或者更确切地说，为什么通配符会覆盖<p>. 我想如果每个标签都具有相同的“权重”，我想我可以在其中看到一些逻辑，但直觉上它对我来说仍然是一个“错误”......而且它往往会为我做更多的标记，因为我可以不要假设这<em>只会以特定方式影响字体样式。

简而言之，有没有办法让“修饰符”像<em>只对特定功能进行操作？

我正在尝试学习一些响应式网页设计技术并尝试以响应式方式编写我的网站。我还不想使用任何框架。我的问题是 ems 中的 div 宽度在移动设备上与在台式机上不同。在桌面上查看时，我h1适合 div，而在移动设备上则不适合。这两种情况不应该是一样的吗？所有尺寸均以 em 为单位。

这是我的 HTML 代码：

CSS：

这是一个现场版本：adamlakomy.pl。我感谢您的所有帮助。

我希望在开始时在“PX”中修复一个字体大小（比如说 onModuleLoad），并将其余的小部件和主题放在“EM”中。这是为了帮助我动态更改不同屏幕分辨率的外观。这是我正在尝试的示例代码。

理想情况下，我想要两个相同字体大小的标签。但是第二个比第一个小很多。但是对于以下代码，它按预期工作。

如果是这种情况，如果我希望实现一个通用的 em，我似乎应该远离垂直/水平面板。我也试过 FlexTable，但同样的问题又来了。

请考虑以下CSS代码：

和HTML：

问题是： .h1-sub类的宽度很奇怪。有一个 body font-size 16px 和 container: 58.75em 应该等于 940px。但相反，我收到 1234px 的宽度。我得出的结论是我的宽度是根据.h1-sub字体大小计算的，即 1.3125em 或 21px。

1em 值不仅可以从正文字体大小继承吗？请注意，字体大小也已被覆盖的 .main-headline 类没有发生任何事情。

提前感谢您的帮助。