css px单位值,CSS 单位 px、pt、em、rem

在 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 和 %；

小的组件和模块可混合使用；

参考