CSS 单位

css 单位中分为相对长度单位绝对长度单位.

相对长度单位:em、ex、ch、rem、vw、vh、vmin、vmax、%

绝对长度单位:cm、mm、in、px、pt、pc

  • 本文会对

px (pixel,像素)

是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。

em (相对长度单位,相对于当前对象内文本的字体尺寸)

1、浏览器的默认字体都是16px,那么1em=16px,以此类推计算12px=0.75em,10px=0.625em,2em=32px;

2、为了简化font-size的换算,我们在body中写入一下代码

body {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */  

这样页面中1em = 10px; 1.2em = 12px; 1.4em = 14px 使得视觉、使用和书写都得到了极大的帮助.

3、em 的值并不是固定的,em 中所有的字体都是相对于父元素的大小决定的;所以如果一个设置了 font-size: 1.2em 的元素在另一个设置了 font-size: 1.2em 的元素里,而这个元素又在另一个设置了 font-size: 1.2em 的元素里,那么最后计算的结果是 1.2 * 1.2 * 1.2 = 1.728em, 宽度高度同理

pt (point,磅)

是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)

rem (root em,根em)

rem 是 CSS3新增的一个相对单位,使用 rem 为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

单位对比表

http://pxtoem.com/

Pixels EMs Percent Points
6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.500em 50.0% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.750em 75.0% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1.000em 100.0% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.250em 125.0% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.500em 150.0% 18pt
Last Updated: 2/16/2020, 7:52:27 PM