(不要与流行的.Net单元测试库Xunit混淆。)
今天,我无聊地开始检查Gmail DOM(是的,我很无聊)。
一切看起来都很简单,直到我注意到某些元素的宽度有趣的规范为止。杰出的Googlites使用稀有的“ ex”单位指定了多个表格列。
width: 22ex;
起初我很困惑(“什么是’ex’?”),然后又回到了我的脑海:我似乎还记得几年前第一次学习CSS时的一些事情。根据CSS3规范:
[ ex单位 ]等于第一个可用字体的 x高度。之所以称它为x高度,是因为它通常等于小写字母“ x”的高度。但是,即使不包含“ x”的字体也定义了“ ex”。
好,好。但是我从未真正看到过它的使用(我自己很少使用过)。我经常使用ems,并赞赏它们的价值,但是为什么要使用“ ex”呢?与em相比,标准的测量似乎少了很多,有用的也少得多。
我发现讨论该主题的几个页面之一是StephenPoley的。斯蒂芬说得很好,但是,他的讨论对我而言没有定论。
所以我的问题是: “前”单位能给网页设计带来什么价值?
(可以将这个问题标记为主观问题,但我将把这个决定留给比我自己更有经验的SO员工。)
当您要根据文本的小写字母的高度调整大小时,此功能很有用。
在设计的印刷尺寸上,字母的高度与其余元素具有重要的空间关系。上面的源图像中的线旨在帮助指出文本的x高度,但是它们还显示了围绕该文本进行设计时的准则。
正如乔纳森(Jonathan)在评论中指出的那样,ex只是em(width)的高度版本。