CSS: 长度单位

说说目前 css 的长度单位

其实就那几个,参考几篇,直接写个总结,不罗嗦:

绝对类型的

  • px 多少像素
  • in 多少英寸
  • cm 多少厘米
  • mm 多少毫米
  • pt point, 1pt=1/72 in
  • pc pica, 1pc=12pt

相对类型的

  • em 相对当前元素的字体大小
  • rem 相对根元素(如 body ) 的字体大小
  • ex: 相对当前元素的 x 字母的高度大小
  • ch: 相对当前元素的 x 字母的宽度大小
  • vw: 相对可视窗口的宽度, %
  • vh: 相对可视窗口的高度, %
  • vmin: 相对可视窗口的宽度或者高度中的小的一个, %
  • vmax: 相对可视窗口的宽度或者高度重的大的一个, %
  • %: 相对当前父元素的同一属性的, %

Codepen 例子(我 fork 的):

See the Pen Testing of Length units on CodePen.

参看:
CSS的长度单位
七个你可能不了解的CSS单位