问题标签 [em]

在这个例子中：

CSS

HTML

“toad”这个词是 0.5 乘以 16px（浏览器的标准字体大小）还是 0.5 乘以 2em（h1 的字体大小）？

简单的代码，但在 chrome 中字体大小始终为 12px，在 IE 中为 10px。对于大于 12 的 px，可以更改。但是对于 12 岁以下的 px，它不能更改....如何解决这个问题？

我有一个全局重置，为每个元素设置和设置 font-size：line-heightinherit

对于html，我明确定义它们：

请注意，这line-height是以相对单位设置的。

对于h1，我定义了不同的字体大小：

我希望h1继承line-height. 1.25em生成的 line-height 应该等于 80px (16×4×1.25)。

但实际上h1'line-height仍然等于20px（与html's 相同：16×1.25=20）。

说，我有以下 HTML：

结果截图：

http://jsfiddle.net/M3t5y/5/

要解决这个问题，我必须明确定义h1'sline-height等于它继承的相同值：

然后line-height变得正确：

http://jsfiddle.net/M3t5y/6/

看起来是先将相对值计算成绝对值，然后再继承绝对值。或者，它可能是相对于父级的font-size，而不是元素的font-size。

问题

1. 为什么亲属line-height继承不正确？
2. 如何使相对line-height值被继承为相对于元素font-size而不是其父元素的值？

PS 标题中有一个问题类似的问题，但细节上有所不同。

I just discovered the initial-scale meta attribute.

Previously, I've been using a default.css to define all my styles and sizes (for fonts and elements) so they appear nicely on screen real estates of desktop computers. Then I might use media queries or PHP to include an phone.css or tablet.css if you're using a phone or tablet, and this will adjust ONLY SIZES for smaller devices.

But now that I've become aware of the concept of initial-scale, should I be using that instead to control sizes of elements?

A very important consequence I'm trying to get at is this...I use to define my font sizes with EM (or REM) units like this:

In other words, my phone.css and tablet.css only adjusts the font-size percentage on the html element, and all other elements will scale accordingly on all different devices. To a certain degree, i do this wiht padding, margins, lineheights and letterspacing.

With the introduction of initial-scale, does that mean EM/REM units are irrelevant for scaling font sizes? We can stick to the much more intuitive PX units? And let initial-scale do the rest of the scaling work?

最近，我为我正在制作的网站重写了 CSS 文件，并尝试使用 em 而不是 px 使大多数元素和字体的大小动态化。尺寸工作..有点，但至少有一个问题。

当使用 em 单位作为框的边距时（边距：0.25em），在 Firefox 中，我在顶部/左侧得到 4px，在右侧/底部得到 3px - 基于 14px 字体大小（实际上是盒子的字体 -浏览器 16px 的 0.875em）。

现在，我是 em 新手，很可能我误解了几件事，但根据我的理解，我认为 14px 的 0.25em 是 3.5px。如果是这种情况，并且舍入是边距中 4 或 3 个像素的原因，这真的是它应该如何工作的吗？具有舍入结果的某个计算每次都应该以完全相同的方式舍入，不是吗？此外，在 Internet Explorer 中，情况正好相反：上/左为 3 像素，右/下为 4 像素。我尝试将值更改为 0.286em（x 14 像素 -> 4.004 像素）以避免恰好为半个像素，而这结果在 Firefox 中为 4/4/4/4，但在 IE 中为 4/3/4/3。

除了这些像素错误之外，更改浏览器字体大小实际上可以很好地缩放所有内容。

我疯了，我误解了什么，两个浏览器都坏了还是......什么？（使用 IE8 和 FF3 和 19。）

我想用 设置字体大小em，而不是px。这是我的代码：

我想将div字体大小设置为 12px，但它看起来比我想象的要小，我div用 chrome 浏览器工具禁用了样式，它看起来没有任何变化。为什么以及如何使div字体大小为 12px？谢谢。

我今天在一个新网站上使用 em's/rem's 玩了一会，有几件事我想在这里讨论/询问。

多年来，我完全是一个基于像素的人，在需要时会投入一些百分比。

我一直在阅读 em 和 rem 是网络应有的“方式”。足够公平，这就是我今天试一试的原因。

所以，第一件事。使用 em's/rem's 的尺寸是否只是为了改变事物相对于主要字体大小的尺寸？

如果是这样，那么您会在什么情况下更改主要字体大小？我一直将我的设置为 16px 并使用它。

我找到了一个 Sass mixin，它允许我以像素为单位指定任何属性的尺寸，并使用 rem 和基于像素的后备输出它。不过，我先根据自己的喜好对其进行了调整。

因此，我开始使用 rem mixin 为我的所有维度（边距、填充和一些高度）构建站点。是的，当我更改主要字体大小时，所有内容都会缩放，但同样的问题与此处的第 2 个问题相同。

我使用 Compass Susy 来设置我的网格并使用 em 来指定它的设置，（我通常会选择像素）。我将 Susy 中的网格样式设置为魔术网格，当浏览器比网格宽但内部完全灵活时，它使网格保持静态。

当然，我所读到的关于使用 em 的好处的所有内容都可以使用媒体查询来完成吗？你们做什么，最重要的是主流网站使用什么？

对，接下来的两个问题是关于图像的。我今天遇到了两种情况，在等式中的某处使用带有图像的 em/rem 会导致问题。

5a。我将 h2 设置为内联块并在周围添加了填充，然后在右侧添加了相当于 45px 填充的 rem。我将 line-height 设置为 1.3 的无单位值。然后，我将图像设置为 h2 的背景，使其出现在右侧以出现在 padding-right 中。在 16px 的标准基本字体大小下，一切都很好。但是，我增加或减少了字体大小，并裁剪了图像的顶部和底部。所以又问了2个问题。我明白为什么图像会被裁剪，但这是如何处理 em/rem 和困扰我的图像之间的关系。

5b。我有一个高度设置为 200px 高度的 rem 高度的 div。然后我在其中添加了一个高度为 200 像素的图像。使用 susy mixin span-columns 将图像的宽度设置为特定的列宽，并将高度设置为自动。当字体大小改变时，我要么最终得到一个太高或太短的图像。在这种情况下，最好的办法是什么？

我正在查看一些可用的指南针 mixin，例如这个：

我不能在里面添加我所有的 em/rem 东西吗？

我认为最重要的问题是：

为什么首先需要 em/rem？在图像方面，您如何与他们合作？有什么想法吗？

I've created a responsive site and want to use em's to control the font size.

I've set the body font base size to 64.5% as recommended to create a base of 10px.

However, though the sizing seems OK, it does not change with the size of the browser. What am I missing?

http://jsfiddle.net/XaUz9/

我是使用 em 的新手。到目前为止，我一直使用 px，但现在该继续前进了。我被我的标题困住了。我有一个 H2 和一个 H6 样式相同

当我将两个标题放在同一个父元素中时，它们以不同的大小显示。这怎么可能？它们是相对于父级还是相对于它们自身的默认字体大小。

谢谢

http://jsfiddle.net/SBAHa/1

在这个问题中：为什么用 em 而不是 px？在最佳投票的答案中，em定义为：

em 不是一个绝对单位——它是一个相对于当前选择的字体大小的单位。除非您通过使用绝对单位（例如 px 或 pt）设置字体大小来覆盖字体样式，否则这将受到用户浏览器或操作系统中字体选择的影响（如果他们已经制作了字体），因此没有意义使用 em 作为一般长度单位，除非您特别希望它随着字体大小的缩放而缩放。

当您特别希望某物的大小取决于当前字体大小时，请使用 em。

在我的网站主页中，我在页面标题（网站名称）中有一个字体大小等于 2.1 em 的h1标签，它看起来小于字体大小等于 1.9 em 的h2标签。以下屏幕截图演示了使用 Google Chrome 浏览器的情况：

我的问题是：在em定义中考虑的当前字体大小是什么意思？换句话说，我怎么知道当前的字体大小？