绝对长度单位

  • 英寸（in）

    1
    2
    1 in = 2.54 cm
    1 cm = 0.394 in

  • 厘米（cm）

  • 毫米（mm）

  • 点（pt）

    1
    2
    12 pt = 1/6 in
    18 pt = 1/4 in

  • 派卡（pc)

    1
    2
    1 pc = 12 pt = 1/6 in
    6 pc = 1 in

  • 像素（px）

    相对于显示器分辨率而定的单位

相对长度单位

  • em和ex

    em是相对字体长度单位，em的值并不是固定的，em会继承父级元素的字体大小

    • 如果用于font-size属性本身，则是相对于父元素的font-size

    • 若用于其他属性（width, height等），则是相对于本身元素的font-size

    ex是指所用字体中小写x的高度

  • rem

    相对于根元素html的font-size属性的计算值，IE8不支持，适用于依据字体尺寸进行的排版，适用于自适应

  • 视口单位

    视口在桌面端，指的是浏览器的可视区域；而在移动端分别是Layout Viewport（布局视口）、Visual Viewport（视觉视口）、Ideal Viewport

    视口单位中的“视口”，在桌面端指的就是浏览器的可视区域；在移动端指的则是布局视口

    根据CSS3规范，视口单位主要包括以下4个：

    • vw: 1vw = 视口宽度的1%

    • vh: 1vh = 视口高度的1%

    • vmin: 选取vw和vh中的最小值

    • vmax: 选取vw和vh中的最大值