css’ex’单位的值是多少?

(不要与 Xunit流行的.Net单元测试库混淆。)

今天在无聊的适应我开始检查Gmails DOM(是的,我很无聊)。

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

width: 22ex;

起初,我被困扰(“什么是前’?),然后它回到我:我似乎记住了从几年前,当我第一次学习CSS的东西。 From the CSS3 spec

[The ex unit is] equal to the used x-height of the 07002. 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”.

好和好。但我从来没有见过它使用过(更少使用它自己)。我使用ems相当普遍,并欣赏他们的价值,但为什么“前”?它看起来比em更不像标准的测量,远远没有用。

我发现讨论这个话题的少数几页是Stephen Poley的http://www.xs4all.nl/~sbpoley/webmatters/emex.html. Stephen表示好点,然而,他的讨论对我来说似乎没有结果。

所以我的问题是:’前’单位借给网页设计有什么价值?

(这个问题可以被标记为主观的,但我会离开这个决定给更经验的SO’ERS比自己。)

解决方法

当你想对与文本的小写字母的高度相关的东西进行大小调整时,它是有用的。例如,想象一个像这样的设计:

在设计的排版维度中,字母的高度与其余的元素具有重要的空间关系。上面的源图像中的线旨在帮助指出文本的x高度,但它们还显示了在围绕该文本设计时指南的位置。

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

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...