CSS长度单位

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

罗列了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	一般用在东亚字体排版上，这个与英文并无关系

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

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

百分比宽度

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

要用哪种呢？

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

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

rem

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

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