css 'ex' 的值是多少？ 单元？
（不要与 Xunit 混淆，这是一个流行的 .Net 单元测试库。
）无聊我开始检查 Gmail DOM（是的，我很无聊）。
一切看起来都非常简单，直到我注意到某些元素的宽度有一个有趣的规范。 著名的 Googlites 使用罕见的“ex”单位指定了许多表列。
width: 22ex;
起初我被难住了（“什么是‘前’？”），然后我回想起：我似乎记得几年前我第一次学习 CSS 时的一些事情。 来自 CSS3 规范：
[ex 单位]等于 第一个可用字体。 x 高度之所以如此命名，是因为它通常等于小写“x”的高度。 但是，即使对于不包含“x”的字体，也会定义“ex”。
好吧，很好。 但我以前从未真正见过它被使用过（更不用说我自己使用过它了）。 我很常用 em，并且很欣赏它们的价值，但为什么用“ex”呢？ 它似乎比 em 更不标准，而且用处也小得多。
我发现讨论此主题的少数页面之一是 Stephen Poley 的 http://www. xs4all.nl/~sbpoley/webmatters/emex.html。 斯蒂芬提出了很好的观点，但是，他的讨论对我来说似乎没有结论。
所以我的问题是：“前”单元给网页设计带来什么价值？
（这个问题可以被标记为主观的，但我会将这个决定留给比我更有经验的 SO'ers。）
(Not to be confused with Xunit, a popular .Net unit testing library.)
Today in a fit of boredom I started inspecting Gmails DOM (yes, I was very bored).
Everything looked pretty straightforward until I noticed an interesting specification on the widths of certain elements. The illustrious Googlites had specified a number of table cols using the rare 'ex' unit.
width: 22ex;
At first I was stumped ("what's an 'ex'?"), then it came back to me: I seem to remember something from years ago when first I was learning about CSS. From the CSS3 spec:
[The ex unit is] equal to the used x-height of the first available font. The x-height is so called because it is often equal to the height of the lowercase "x". However, an ‘ex’ is defined even for fonts that do not contain an "x".
Well and good. But I've never actually seen it used before (much less used it myself). I use ems quite commonly, and appreciate their value, but why the "ex"? It seems much less standard a measurement than the em, and far less useful.
One of the few pages I found discussing this topic is Stephen Poley's http://www.xs4all.nl/~sbpoley/webmatters/emex.html. Stephen makes good points, however, his discussion seems inconclusive to me.
So my question is: What value does the 'ex' unit lend to web design?
(This question could be tagged subjective, but I'll leave that decision to more experienced SO'ers than myself.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
当您想要根据文本小写字母的高度调整某些内容的大小时，它非常有用。 例如，想象一下这样的设计：
在设计的印刷维度中，字母的高度与其他元素具有重要的空间关系。 上面源图像中的线条旨在帮助指出文本的 x 高度，但它们也显示了围绕该文本进行设计时指南的位置。
正如 Jonathan 在评论中指出的那样，ex 只是 em（宽度）的高度版本。
It is useful when you want to size something in relation to the height of your text's lowercase letters. For example, imagine working on a design like so:
In the typographic dimension of design, the height of letters has important spatial relationships to the rest of the elements. The lines in the source image above are intended to help point out the x-height of the text, but they also show where guidelines would be if designing around that text.
As Jonathan pointed out in the comments, ex is simply the height version of em (width).
要回答这个问题，一种用法是使用上标和下标。 例子：
To answer the question, one use is with superscript and subscript. Example:
这里要考虑的另一件事是当用户增大或减小字体大小（可能使用 ctrl+鼠标滚轮（Windows））时页面如何缩放。
我用过它们..
左内边距：2em；
右内边距：2 em；
和前与
底部填充：2 ex；
顶部填充：2 ex；
因此，对于垂直缩放属性使用垂直测量单位，对于水平缩放属性使用水平测量单位。
Another thing to consider here is how your page scales when a user ups or downs their font size (perhaps using ctrl+mouse wheel (windows)).
I have used em with..
padding-left: 2 em;
padding-right: 2 em;
and ex with
padding-bottom: 2 ex;
padding-top: 2 ex;
Thus using a vertical unit of measure for a vertically scaling property and a horizontal unit of measure for a horizontally scaling property.
请注意，“单/双行距”等术语实际上是指两条相邻行之间的偏移量，以 em 为单位测量。 所以“双倍行距”意味着每行的高度为 2em。
因此，如果要指定与“线”成比例的垂直距离，请使用 em。 仅当您想要小写字母的实际高度时才使用 ex，我敢说，这是一个更罕见的例子。
更新：
Web 标准允许浏览器使用 0.5em 作为 ex 或从字体派生。
但是，无法在字体（OpenType 或 webfont）中可靠地嵌入任何“x 高度”信息。
因此，前一种可能性使得前单位变得多余，而后者则缺乏任何可靠的手段来发生。 事实上，这两种情况都可能发生，这使得它更加不可靠。
因此我认为前单位缺乏价值。
Note that, terms like "single/double line spacing" actually mean the offset between two adjacent lines, measured by em. So "double line spacing" means each line has a height of 2 em.
Therefore, if you want to specify a vertical distance that is proportional to "lines", use em. Only use ex if you want the actual height of lowercase letter, which is, I dare say, a much rarer instance.
UPDATE:
The web standard allows the browser to use either 0.5em as ex or derive from the font.
However, there is no way to reliably embed any "x-height" information in a font (OpenType or webfont).
Hence, the former possibility makes the ex-unit redundant, and the latter lacks any reliable means to happen. And the fact that either is possible makes it even less reliable.
Thus I argue for the lack of value of the ex-unit.
在 CSS 规范中拥有它的值（如果这就是您真正要求的）与拥有 em 单位的值完全相同。
它使您能够将字体设置为相对大小。
你不知道我的基本字体大小是多少。 因此，网页设计的一个好的策略是设置相对的字体大小，而不是绝对的； 相当于“正常尺寸的两倍”或“比正常尺寸小一点”，而不是像“十像素”这样的固定尺寸。
The value of having it in the CSS spec, if that's what you're really asking, is exactly the same as the value of having the em unit.
It enables you to set fonts to relative sizes.
You don't know what my base font size is. So one good strategy for web design is to set font sizes which are relative, rather than absolute; the equivalent of "double your normal size" or "a little smaller than your normal size" rather than a fixed size like "ten pixels".
对于以像素为单位的实际值，
getComputedStyle可以帮助您。例如，在我的机器上，
（MacOs 上的 Chrome - 默认字体）
1ex == 7.2px（MacOs 上的 Chrome - “system-ui”字体）
1ex == 8.4pxFor actual value in pixels,
getComputedStyleis there to the rescue.For example, on my maching,
(Chrome on macOs - default font)
1ex == 7.2px(Chrome on macOs - "system-ui" font)
1ex == 8.4px