在 CSS 语言中总会用到各种单位设置,如:font-size、line-height、height、width 等等。这里会对目前使用到的各种 CSS 单位做简单的分析,主要涉及有 px、pt、em、rem、vh/vw、% 等。
相对单位可以尽可能的让元素按照比例进行缩放,从而保证布局的完整性。
dpi
精度 DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有 DPI 可选。Windows系统默认是 96dpi,Apple系统默认是 72dpi,打印机通常为 300dpi。
px
即像素 Pixels,是一种绝对单位,是一个虚拟长度单位,是计算机系统的数字化图像长度单位。正常情况下取值范围为 9 ~ 512(实际上是无上下限的)。像素是相对于显示器屏幕分辨率而言的,使用该单位的元素,不会因为其它元素的尺寸变化而变化。在做响应式开发的时候,应尽量避免使用 px 作为单位。
pt
即磅 Points,是一种绝对单位,是物理长度单位,等于 1/72 寸。它的取值范围和 px 类似。
1寸是多少呢?1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
pt 和 px 的换算如下:
公式 N(pt) = N(px) * dpi / 72
dpi:windows = 96、mac = 72;
例如:windows 上 1pt = 1px * 96 / 72;
常见如下:
1pt = 2px = 1.3333333333333333px
6pt = 8px = 8px
9pt = 12px = 12px
10pt = 14px = 13.333333333333334px
12pt = 16px = 16px
14pt = 19px = 18.666666666666668px
15pt = 20px = 20px
18pt = 24px = 24px
em
是一种相对单位,参考基准为父节点字体的大小(表示相对于父元素的字体大小),最初是指字母 M 的宽度,故名 em。它的取值范围不宜过大,通常为 0.5 ~ 1.5 左右。如果自身定义了 font-size 则按自身来计算,大部分浏览器默认字体约为 16px,所以 1em = 16px。
同一段 CSS 代码中,相同的 em 值可能实际的显示尺寸都是不一样的,这就是因为 em 是相对于父级字体大小定义的。
公式 N(px) = N(em)/16
当父级的 font-size = 16px 时,对应的 em 如下:
1px = 0.0625em
3px = 0.1875em
5px = 0.3125em
6px = 0.375em
8px = 0.5em
9px = 0.5625em
12px = 0.75em
14px = 0.875em
16px = 1em
18px = 1.125em
20px = 1.25em
24px = 1.5em
32px = 2em
48px = 3em
64px = 4em
72px = 4.5em
80px = 5em
96px = 6em
128px = 8em
256px = 16em
rem
即 root em,和 em 一样,它也是相对长度单位,取值范围也和 em 是一样的。和 em 不同的是,它始终以 body 的 font-szie 为基准值进行计算。它也是 CSS3 新增的一个相对单位。
vh/vw
CSS3 提出了视口百分比(viewport-percentage lengths)的概念,其中包含了 vh、vw、vmin 和 vmax 四个单位,这四个单位都是相对长度单位,类似 % 单位,只不过,明确了它们是是相对浏览器可视区域(Viewport)定义,其取值范围为 0 - 100。
vh:基于可视区域的高度百分比,如:height: 10vh;
vw:基于可视区域的宽度百分比,如:width: 10vw;
vmin 和 vmax:二者都是从宽度或高度重选择最大或最小的百分比;
vh、vw
兼容性一览:
兼容性一览
百分比 %
百分比也是常用的长度单位,它始终相对于父元素对应的属性,即和父级的属性一一对应。如:width: 100% 等于父级宽度的 100%,但不包含父级的 padding;font-size: 120% 等于父级字号的 120%。
计算表达式
calc 是英文单词 calculate(计算)的缩写,是 CSS3 新增的一个功能,用来指定元素的长度。可以使用 calc() 给元素的 border、margin、pading、font-size 和 width 等属性设置动态值。
.el {
/* 高度为父级的 100% - 48px,特别适合做后台界面那种自动高度伸展效果 */
height: calc(100% - 48px);
}
总结
对于常规布局,可以使用 px 作为单位,如:width: 1200px;
对于栅格系统可以使用百分比 % 作为单位,如:20%;
对于字号,可以给 body 一个固定值(px),然后其他字号使用 rem 或 em 作为单位;
如果确定浏览器的版本比较新,可以考虑使用 vh、vw 等单位;
大的页面框架优先使用 px 和 %;
小的组件和模块可混合使用;
参考