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

最新推荐文章于 2024-09-30 08:56:51 发布

原创最新推荐文章于 2024-09-30 08:56:51 发布 · 5.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web design

本文介绍了网页设计中常用的像素（px）、点（pt）和百分比（em）单位，探讨了它们在不同场景的应用。px作为屏幕最小单位，直观易用；pt在印刷行业常见，1pt等于1/72英寸；em是相对单位，与CSS继承相关，提供设计灵活性。还提到了像素密度PPI（DPI）的概念。文章提供了px与pt、px与em之间的转换公式，帮助设计师进行单位换算。

px：pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便；
pt：point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用；
em：即％，在CSS中，1em＝100％，是一个比率，结合CSS继承关系使用，具有灵活性。
PPI（DPI）：pixel（dot）per inch，每英寸的像素（点）数，是一个率，表示了“清晰度”，“精度”

PX和PT转换的公式：
pt=px乘以3/4。
PX和em转换的公式：
em=16乘以px，也就是说1.5em=1.5×16=24px。

设计中常用PX / EM / PT/ 百分比转换表格
Pixels	6px	7px	8px	9px	10px	11px	12px	13px	14px	15px	16px	17px	18px	19px	20px	21px	22px	23px	24px
EMs	0.375em	0.438em	0.5em	0.563em	0.625em	0.688em	0.75em	0.813em	0.875em	0.938em	1em	1.063em	1.125em	1.188em	1.25em	1.313em	1.375em	1.438em	1.5em
Percent	37.5%	43.8%	50%	56.3%	62.5%	68.8%	75%	81.3%	87.5%	93.8%	100%	106.3%	112.5%	118.8%	125%	131.3%	137.5%	143.8%	150%
Points	5pt	5.5pt	6pt	7pt	8pt	8pt	9pt	10pt	11pt	11pt	12pt	13pt	14pt	14pt	15pt	16pt	17pt	17pt	18pt