在查资料的时候，发现网上有的人说 px是相对单位，有的人说px是绝对单位。。px是相对单位还是绝对单位？

  • 《css权威指南》第三章-单位和值的小节“长度单位”中简易说明了px是相对长度单位。
  • 《The Lengths of CSS》中指出px是绝对长度单位。

我看了一下，我个人偏向于px是个绝对单位，因为px的大小一般情况下是固定的，只是对于高分辨率的设备，大小会发生变动。。

绝对单位

此类单位的长度值与其代表的物理长度相等。

px

  • 在低分辨率设备上，1px = 1像素
  • 在高分辨率设备上，1px = 1/96in，1px不一定等于1像素（比如4.7英寸的iphone上 1px=2像素）
  • 对于图片显示，1px = 1图片像素，比如：一个600x400分辨率的照片的的CSS宽高即为600px和400px（在4.7英寸iphone上要用1200x800个像素点显示）

其它

1
1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px

相对单位

相对单位的长度值是根据其他参照物的长度计算得出的。

%

  • 对font-size设置百分比值，参照物为浏览器默认字体大小16px。即font-size:62.5%为10px
  • 如果对div使用的话，以父元素为参照物。另外我发现，%不受父元素的宽高被margin、padding、border此类变大的影响。

em

  • em代表元素的当前字体大小，如果元素的font-size为2cm，那么1em即表示2cm
  • 如果em直接用于font-size属性，如font-size: 2em，则em表示为父元素字体的大小
  • 如果元素没有font-size属性，就找父级元素，如果都没有设置，就用浏览器默认的font-size16px

    ex

不推荐使用

ex很少被使用，ex表现的大小与字体的x-height相关。x-height大致等于字体中小写字母（例如a，c，m或o）的高度。相同font-size的不同字体的x-height可能会有很大的差别，所以使用ex产生的效果存在很大的不确定性。

rem

rem表示的是根元素（html元素的）字体大小。在每个元素里面em都可能不一样，但是rem都是一致的。

ch

css3中加入的新单位，用的比较少，表示当前字体中的 0 (零、unicode 字符 U+0030) 的宽度

vw，wh，vmin，vmax

  • 都是css3新加入的元素，以视窗为参照物。

  • vw是视窗宽度的 1/100

  • vh是视窗高度的1/100

  • vmin是vh和vw中的较小值

  • vmax是vh和vw中的较大值

各种单位的主要作用

输出媒介 推荐 偶尔使用 不推荐
屏幕 em, px, % ex pt, cm, mm, in, pc
打印 em, cm, mm, in, pt, pc, % px, ex