CSS长度单位

时间:2022-11-28 19:54:57

罗列了CSS中常用的长度单位及比较

单位 含义
em 相对于父元素的字体大小
ex 相对于小写字母"x"的高度
rem 相对于根元素字体大小
px 相对于屏幕分辨率而不是视窗大小:通常为1个点或1/72英寸
in inch, 表英寸
cm centimeter, 表厘米
mm millimeter, 表毫米
pt 1/72英寸
pc 12点活字,或1/12点
% 相对于父元素。正常情况下是通过属性定义自身或其他元素
vw 相对于视窗的宽度:视窗宽度是100vw
vh 相对于视窗的高度:视窗高度是100vh
vm 相对于视窗的宽度或高度,取决于哪个更小
ch 相对于0尺寸
gd 一般用在东亚字体排版上,这个与英文并无关系

px

像素(Pixel)。像素px是相对于显示器屏幕分辨率而言的。是较常用的长度单位。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.在没有任何CSS规则的前提之下,任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

使用em需要注意,em值不是固定的,em会继承父级元素的大小。例如,当设置了font-size属性后,它会逐级向上相乘,所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里,而这个元素又在另一个设置了font-size:1.1em的元素里,那么最后计算的结果是1.1X1.1X1.1=1.331rem(根em)。这意味着即使一个元素设置为10em,这个元素也不会在他出现的每个地方都是10em。如果font-size变化了,它可能会宽点,也可能会窄点。

rem

rem也是相对单位.不过它总是相对根元素的长度。它不会像em一样,使用级联的方式计算。这个使用起来就更简单些。它是CSS3引入的。

但rem只在IE9+,Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome和Opera11+等浏览器中被支持,IE6-8不支持。

vw

vw是可视区域宽度单位。1vw即可视区域宽度的百分之一。这有些和百分比宽度相似,但是,vw对于所有的元素都一样,与父元素的宽度无关。但是支持这个单位的浏览器很少,在移动浏览器中只有ios6支持。其他可视区域单位浏览器支持情况类似。

百分比宽度

百分比宽度是基于父元素的宽度计算的。

要用哪种呢?

px

px是用的比较多的长度单位,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览Web页面时,他改变了浏览器的字体大小,这时会使Web页面布局被破坏。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。

em

使用em比较难处理的地方,是em是相对于父元素大小来确定其大小的。这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的问题。

rem

CSS3新定义的rem,这样就可以根据根元素确定字体的大小了。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。另外,除了IE8及更早版本外,所有浏览器均已支持rem。

如果想使用rem,并兼容IE6-8,可以px与rem一起用。如果目标用户都使用新浏览器,就可以放心用rem了。

rem很受欢迎。。。