问题标签 [em]

我正在阅读有关最佳字体大小和布局大小的信息……并且我正在研究 em 而不是 px。

据我了解，如果我像这样制作CSS；

它将强制浏览器使 16px = 1em，这将使我能够通过计算所需的像素/16 来执行宽度和高度属性，对吗？

我正在寻找一种可靠的方法来使用 javascript 以 em 为单位获取窗口的宽度。我很惊讶地看到 jQuery 只会返回像素测量结果。任何帮助表示赞赏。

我有一些标记：

我想设计这样的样式，使<dd>s 与<dt>s 一致。我的文档line-height设置为1.3. 知道ems 等于font-size并且line-height是 的百分比font-size，我尝试了：

为我的数据提供<dt>合理的间距。这不起作用，因为以像素为单位line-height测量15px但1.3em测量15.6px。根据http://www.brunildo.org/test/line-height-approx.html，不同的浏览器计算行高的确切像素值不同 - 我在 Chrome 中开发，很幸运被它抓住了.

出于这个问题的目的，我想避免像素 - 指定line-height, 和margin-top以像素为单位可以工作，但调整大小会很差。

这是一个显示问题的uri：

http://jsfiddle.net/mJxn4/

<em>这很奇怪：我在标签中包含了几行文本。无论我做什么，将值降低line-height到 17px 以下都没有效果。我可以将它line-height 提高到大于 17px 并且它会适用，但我不能让它低于 17px。

有问题的CSS是：

尝试将行高调整为更高和更低，并在每次更改后运行更新的小提琴，你会明白我的意思。

为什么会这样？line-height在 CSS 中的其他任何地方都指定了否，因此没有任何内容可以覆盖它。无论如何不可能是这样，因为我在同一个 selectorline-height中调整up 和 down ，因此应用更高的值是没有意义的，但会覆盖更低的值。

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

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

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

http://jsfiddle.net/jm3sK/

我有一个带有每个图像的文本框的轮播，我的客户（对 HTML 一无所知）使用所见即所得的文本编辑器编辑文本框。由此产生的输出类似于你最糟糕的噩梦；就像是：

这个网站必须以 3 种不同的尺寸显示以适应较小的显示器，所以我一直在使用 CSS 媒体查询来调整网站的大小。

现在我无法正确调整文本框中的文本大小。我曾尝试使用jQuery.fn.css获取 中每个元素的字体大小px，然后将其转换为em. 然后，通过在font-size:x%上设置一种声明.carousel-text-container，我希望这会正确调整所有内容的大小。

不幸的是，字体大小在 ems 中的应用似乎具有递归性质。也就是说，.example在下面没有正确调整大小，因为它的父级也在影响它

如何可靠且精确地调整所有内容的大小，以便为所有子级实现原始字体大小、边距、填充、行高等的真实百分比.carousel-text-container？

现在，我正在想象某种递归 JavaScript 函数：

更新：我让客户利用调整某些单词的大小以用作标题等，所以我不能简单地将所有内容设置为单一字体大小。

只是一个想法：是否可以放置在 HTML5 画布中并以这种方式拍摄快照和/或调整大小？

我曾多次看到技术娴熟的网页设计师/开发人员在字体大小以及边距和填充中应用 em 单位，我很想知道 em 单位也可以应用于元素的高度和宽度？或者我们可以坚持使用像素。

我一直在做所有em基于编码的工作，所以当我检查我的元素并获得一个宽度时px，这只是做数学的一个额外步骤。是否可以在 Chrome 开发人员工具中将单位从更改为px？em

编辑：上传的图片

我正在构建一个响应式站点，我想使用新的 css3 单元 - rem。

我已经将 html 标记上的基本字体大小设置1rem为 is16px然后将 body 设置为 62.5% ，10px但在 chrome 控制台中查看计算的样式时，我看到了 body font-size:12px。

我尝试使用设置身体，0.625em但结果仍然相同，我错过了什么？

你可以在这里看到一个例子：http: //jsfiddle.net/pPmBm/2/

编辑：

刚刚在 FF 上测试过，似乎工作正常，所以这似乎是一个 chrome 问题。

我在比较布局中页面之间的字体大小时遇到​​问题。我在正文上设置了字体font-size: 100%;，在我的段落标签上设置了font-size: 1em;.

我有一个带有 CSS 列和单列布局的两列页面集。字体在单列页面上呈现更大。font-size: .75em;它在页脚和我网站的主要部分的呈现方式也不同。

我已经确定它只是 Chrome 并且似乎导致了 Nexus 7 上的问题。这个问题在 iPad 3 中的 Chrome 上不是问题。

有人对这个有经验么？