跳到主要内容

CSS长度单位总结

长度单位包括绝对长度单位和相对长度单位

绝对长度

  • px:像素
  • pt:磅
  • pc:派卡
  • in:英寸
  • cm:厘米
  • mm:毫米

px 即 pixel 像素,是相对于屏幕分辨率而言的,属于绝对单位,但是具有一定的相对性。不同设备间具有一定差异

相对长度

相对长度单位适用于响应式开发

  • em
    • font-size 中是相对于父元素的字体大小
    • 其他属性是相对于当前元素的字体大小
  • rem:相对于根(html)元素的字体大小
  • ex:相对于字符"x"的高度
  • ch:相对于数字"0"的宽度
  • vw:相对于视口宽度的百分比,1vw等于视口宽度的1%
  • vh:相对于视口高度的百分比,1vh等于视口高度的1%
  • vmin:等于视口的宽度和高度中较小的那一个的1%
  • vmax:等于视口的宽度和高度中较大的那一个的1%

em 和 rem 的区别在于:em 相对父元素的字体大小,rem 相对 html 根元素的字体大小;且 em 需要先确定自身的字体大小才行