css单位
2017-08-14 本文已影响20人
5df463a52098
## rem和em
em单位被定义为当前字体大小。例如,如果你在body元素上设置一个字体大小,
那么在body元素内的任何子元素的em值都等于这个字体大小。
rem单位定位为根元素字体大小。例如,html的设置一个字体大小,那么可以根
据这个值设置body中任意子元素的rem值。
## vh和vw
这两个单位方使用显示窗口的宽度和高度。vh等于viewport高度的1/100,同样,
vw等于viewport宽度的1/100。例如,如果浏览器的高是900px,1vh求得的值为
9px。同理,如果显示窗口宽度为750px,1vw求得的值为7.5px。
## vmin和vmax
vh和vm总是与视口的高度和宽度有关,与之不同的,vmin和vmax是与这次宽
度和高度的最大值或最小值有关。例如,如果浏览器设置为1100px宽、700px
高,1vmin会是7px,1vmax为11px。然而,如果宽度设置为800px,高度设置
为1080px,1vmin将会等于8px而1vmax将会是10.8px。
## ex和ch
ex和ch单位,与em和rem相似,依赖于当前字体和字体大小。然而,与em和
rem不同的是,这两个单位只也依赖于font-family,因为它们被定为基于特殊
字体的法案。基本的概念是,给定一个等宽字体的字体,一个N个字符单位宽
的盒子,比如width:40ch;,可以一直容纳一个有40个字符的应用那个特定字体
的字符串。虽然这个特殊规则的传统用途与列出盲文有关,但是这里创造性的
可行性一定会超越这些简单的途。
ex单位被定义为"当前字体的x-height或者一个em的一半"。给定的字体的x-height
是指那个字体的小写x的高度。通常,这是这个字体的中间的标志。
vmin.png
vmax.png