css'ex'单元的价值是什么?

(不要和stream行的.NETunit testing库Xunit混淆)

今天,我感到无聊,开始检查Gmail的DOM(是的,我非常无聊)。

一切都看起来很直接,直到我注意到有关某些元素的宽度有趣的规范。 杰出的Googlites用罕见的“ex”单位指定了许多表格。

width: 22ex; 

起初,我被困住了(“什么是”前“?),然后它回到我身上:我似乎记得几年前,当我第一次了解CSS时。 从CSS3规范 :

[ 前单位 ]等于第一个可用字体的使用x高度。 x高度是这样称呼的,因为它通常等于小写字母“x”的高度。 但是,即使对于不包含“x”的字体也定义了“ex”。

好,好。 但是,我从来没有真正看到它使用过(自己更less使用它)。 我常用ems,并欣赏它们的价值,但为什么“ex”呢? 这个标准似乎比标准要less得多,而且用处也不大。

我发现讨论这个话题的几页之一是Stephen Poley的http://www.xs4all.nl/~sbpoley/webmatters/emex.html 。 斯蒂芬说得很好,然而,他的讨论似乎没有结果。

所以我的问题是: “ex”单元对网页devise有什么价值?

(这个问题可以被标记为主观的,但是我会把这个决定留给比我更有经验的SO'ers。)

当你想根据文本的小写字母的高度来设置大小的时候,这是非常有用的。 例如,想像一下这样的devise:

替代文字

在devise的印刷维度中,字母的高度与其他元素之间具有重要的空间关系。 上面的源代码中的行旨在帮助指出文本的x高度,但是也会显示围绕该文本devise的指南的位置。

正如Jonathan在评论中指出的那样,ex只是em(width)的高度版本。

为了回答这个问题,一个用于上标和下标。 例:

 sup { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; bottom: 1ex; } 

这里要考虑的另一件事是当用户上下字体大小(可能使用Ctrl +鼠标滚轮(Windows))时页面的缩放比例。

我已经用了em .. padding-left:2 em; 填充权利:2时;

和ex底部填充:2前; padding-top:2 ex;

因此,使用垂直缩放属性的垂直测量单位和水平缩放属性的水平测量单位。

在CSS规范中的价值如果这就是你真正要求的价值,那就是拥有em单元的价值。

它使您能够将字体设置为相对大小。

你不知道我的基本字体大小是什么。 所以一个好的网页devise策略就是设置相对而非绝对的字体大小。 相当于“正常尺寸的两倍”或者“比正常尺寸稍小”,而不是像“十像素”那样的固定尺寸。

请注意,像“单行/双行间距”这样的术语实际上是指由em测量的两条相邻行之间的偏移量。 所以“双线间距”是指每条线的高度为2em

因此,如果要指定与“线”成比例的垂直距离,请使用em。 只有使用前,如果你想实际的小写字母的高度,这是我敢说,一个更罕见的例子。