css 'ex' 单位的价值是多少？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/918612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the value of the css 'ex' unit?
提问by Joel
(Not to be confused with Xunit, a popular .Net unit testing library.)
（不要与流行的 .Net 单元测试库Xunit混淆。）
Today in a fit of boredom I started inspecting Gmails DOM (yes, I was very bored).
今天在一阵无聊中我开始检查 Gmails DOM（是的，我很无聊）。
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.
一切看起来都很简单，直到我注意到某些元素的宽度有一个有趣的规范。杰出的 Googlites 使用罕见的“ex”单位指定了许多表列。
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:
起初我被难住了（“什么是'ex'？”），然后我又回想起来：我似乎记得几年前我第一次学习 CSS 时的一些事情。来自 CSS3 规范：
[The ex unitis] 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".
[ ex unitis] 等于已使用的第一个可用字体的x 高度。x-height 之所以这么叫，是因为它通常等于小写字母“x”的高度。但是，即使对于不包含“x”的字体也定义了“ex”。
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.
很好。但我以前从未真正见过它使用过（更不用说我自己使用过它）。我经常使用 em，并欣赏它们的价值，但为什么是“ex”？与 em 相比，它似乎没有那么标准，也没有多大用处。
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.
我发现讨论这个话题的几页之一是 Stephen Poley 的http://www.xs4all.nl/~sbpoley/webmatters/emex.html。斯蒂芬提出了很好的观点，但是，他的讨论对我来说似乎没有结论。
So my question is: What value does the 'ex' unit lend to web design?
所以我的问题是：“ex”单位对网页设计有什么价值？
(This question could be tagged subjective, but I'll leave that decision to more experienced SO'ers than myself.)
（这个问题可能被标记为主观的，但我会把这个决定留给比我更有经验的 SO'ers。）
回答by Rex M
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.
在设计的排版维度中，字母的高度与其余元素具有重要的空间关系。上面源图像中的线条旨在帮助指出文本的 x 高度，但它们也显示了围绕该文本进行设计时指南的位置。
As Jonathan pointed out in the comments, ex is simply the height version of em (width).
正如乔纳森在评论中指出的那样，ex 只是 em（宽度）的高度版本。
回答by jbs
To answer the question, one use is with superscript and subscript. Example:
要回答这个问题，一种用法是使用上标和下标。例子：
sup {
font-size: 75%;
height: 0;
line-height: 0;
position: relative;
vertical-align: baseline;
bottom: 1ex;
}
回答by jbs
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)).
这里要考虑的另一件事是当用户增大或减小字体大小（可能使用 ctrl+鼠标滚轮（窗口））时您的页面如何缩放。
I have used em with.. padding-left: 2 em; padding-right: 2 em;
我已经使用 em 了.. padding-left: 2 em; 填充右：2 em；
and ex with padding-bottom: 2 ex; padding-top: 2 ex;
和 ex with padding-bottom: 2 ex; 填充顶部：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.
因此，对垂直缩放属性使用垂直度量单位，对水平缩放属性使用水平度量单位。
回答by Yì Yáng
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.
请注意，像“单/双行间距”这样的术语实际上是指两条相邻行之间的偏移量，由em测量。所以“双行间距”意味着每行的高度为 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.
因此，如果要指定与“线”成比例的垂直距离，请使用 em。仅当您想要小写字母的实际高度时才使用 ex，我敢说，这是一个非常罕见的例子。
回答by AmbroseChapel
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.
在 CSS 规范中拥有它的价值，如果这就是你真正要问的，与拥有 em 单位的价值完全相同。
It enables you to set fonts to relativesizes.
它使您能够将字体设置为相对大小。
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".
你不知道我的基本字体大小是多少。因此，网页设计的一个好策略是设置相对的字体大小，而不是绝对的；相当于“两倍正常尺寸”或“比正常尺寸小一点”，而不是像“十个像素”这样的固定尺寸。
