常用长度单位PX/EM/PT/百分比转换公式与对照表

最新推荐文章于 2022-01-09 14:26:29 发布

原创最新推荐文章于 2022-01-09 14:26:29 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

35 篇文章

订阅专栏

本文提供了一张包含像素、em、点与百分比单位转换的表格，帮助开发者在设计中实现单位之间的灵活转换。表格中包含了从像素到em、点和百分比的常见转换值，前提是在body元素的字体大小设置为16px。

PX和PT转换的公式：

pt=px乘以3/4。
比如12px×3/4=9pt大小。

PX和em转换的公式：

em=16乘以px，也就是说1.5em=1.5×16=24px。

设计中常用PX/EM/PT/百分比转换表格

Pixels	EMs	Percent	Points
6px	0.375em	37.50%	5pt
7px	0.438em	43.80%	5pt
8px	0.5em	50%	6pt
9px	0.563em	56.30%	7pt
10px	0.625em	62.50%	8pt
11px	0.688em	68.80%	8pt
12px	0.75em	75%	9pt
13px	0.813em	81.30%	10pt
14px	0.875em	87.50%	11pt
15px	0.938em	93.80%	11pt
本表可用的前提是body中的字体设为16px，这也是目前绝大部分浏览器的默认设置
16px	1em	100%	12pt
17px	1.063em	106.30%	13pt
18px	1.125em	112.50%	14pt
19px	1.188em	118.80%	14pt
20px	1.25em	125%	15pt
21px	1.313em	131.30%	16pt
22px	1.375em	137.50%	17pt
23px	1.438em	143.80%	17pt
24px	1.5em	150%	18pt