pt和px区别pt是逻辑像素，px是物理像素
pt和px区别 pt是逻辑像素，px是物理像素
字体⼤⼩的设置单位，常⽤的有2种：px、pt。这两个有什么区别呢？
先搞清基本概念：px就是表⽰pixel，像素，是屏幕上显⽰数据的最基本的点；
pt就是point，是印刷⾏业常⽤单位，等于1/72英⼨。
以iPhone8为基础750做的设计pt单位的，再⽹页中⽤px做单位要在pt基础上乘以2了
以iPhone8为基础750做的设计pt单位的，再⽹页中⽤px做单位要在pt基础上乘以2了
逻辑像素和物理像素:
逻辑像素（logic point）：逻辑像素的单位是PT，它是按照内容的尺⼨计算的单位。⽐如iPhone 4的逻辑像素是480x320pt。但是由于每个逻辑的点因为视⽹膜屏密度增加了⼀倍，即1pt=2px，那么其实iPhone 4的物理像素是960x640px。iOS开发⼯程师和使⽤Sketch和AdobeXD软件设计界⾯的设计师使⽤的单位都是PT。
物理像素的单位就是我们常说的pixel，简写成PX。它是我们在Photoshop和切图中使⽤的单位，屏幕设计中最⼩的单位就是1px不可再分割。使⽤Photoshop设计移动端界⾯和⽹站的设计师使⽤的单位是PX。在以下的⽂章中，如果您使⽤Photoshop设计界⾯，那么只需要记住所有px单位的数值和⽀持Photoshop的⼯具，如果使⽤Sketch或Adobe XD设计界⾯，那么只需要记住所有pt单位的数值和对应的⼯具即可。
===============
px是⼀个点，它不是⾃然界的长度单位，谁能说出⼀个“点”有多长多⼤么？可以画的很⼩，也可以很⼤。如果点很⼩，那画⾯就清晰，我们称它为“分辨率⾼”，反之，就是“分辨率低”。所以，“点”的⼤⼩是会“变”的，也称为“相对长度”。
pt全称为point，但中⽂不叫“点”，查⾦⼭词霸可以看到，确切的说法是⼀个专⽤的印刷单位“磅”，⼤⼩为1/72英⼨。所以它是⼀个⾃然界标准的长度单位，也称为“绝对长度”。
因此就有这样的说法，pixel是相对⼤⼩，⽽point是绝对⼤⼩。
分清“屏幕效果”和“打印效果”：
在浏览⽹页过程中，所有的“⼤”“⼩”概念，都是基于“屏幕”这个“界⾯”上。“屏幕”上的各种信息，包括⽂
字、图⽚、表格等等，都会随屏幕的分辨率变化⽽变化，⼀个100px宽度⼤⼩的图⽚，在800×600分辨率下，要占屏幕宽度的1/8，但在1024×768下，则只占约1/10。所以如果在定义字体⼤⼩时，使⽤px作为单位，那⼀旦⽤户改变显⽰器分辨率从800到1024，⽤户实际看到的⽂字就要变“⼩”（⾃然长度单位），甚⾄会看不清，影响浏览。
那是不是⽤pt做单位就没这样的问题呢？错！问题同样出现。刚才的例⼦已经很清楚的说明，在不同分辨率下，⽆论是px还是pt，都会改变⼤⼩。以现在的电脑屏幕情况，还没有⼀种单位可以保证，在不同分辨率下，⼀个⽂字⼤⼩可以“固定不变”。因为这很难以实现也不是很有必要：全球电脑⽤户以亿来数，屏幕从14⼨到40⼨甚⾄更⾼都有，屏幕⼤⼩不同，分辨率也不同，要保证⼀个字体在所有⽤户⾯前⼤⼩⼀样，实在是MISSION IMPOSSIBLE。另外，电脑有其⾃⾝的调节性。
那在页⾯设计中到底是⽤px还是pt呢？
我认为，这个并没有什么原则性差异，就看⾃⼰处于什么⾓度思考了。
Mac机怎么情况不清楚，在Windows⾥，默认的显⽰设置中，把⽂字定义为96DPI（PPI，微软都将DPI和PPI混为⼀体，我们也就⽆须较真了）。这样的定义，说明了：1px＝1/96英⼨。联系pt的概念，1pt＝1/72英⼨，可以得出，在这样的设置中，1px＝0.75pt，常见的宋体9pt ＝12px。在显⽰器分辨率不变的基础上（⽐如现在常⽤的1024×768），1px⼤⼩也就固定不变，改变显⽰设置，调整为144DPI，
可以得出，1px＝0.5pt，常见的宋体9pt＝18px。原先⽤12px来组成的⼀个⽂字，现在需要18px来组成，px多了，⽂字就“⼤”了，更易阅读了。
所以，px和pt的使⽤区别，只有当⽤户改变默认的96DPI下才会产⽣：使⽤px定义⽂字，⽆论⽤户怎么设置，都不会改变⼤⼩；使⽤pt定义⽂字，当⽤户设置超过96DPI的值，数值越⼤，字体就越⼤。
  （附公式：px = pt * DPI / 72) 对了，刚才还提到改变浏览器中⽂字⼤⼩的选项，也可以改变⽹页的⽂字⼤⼩。但在这种情况下，使⽤px 和pt都是⽆效的，因为这2个都是有实际“pixel”数值的单位，⽐如9pt是12px，⼤⼩固定。这⾥要引⽤新的单位：em，其实就是％。因为当⽹页中的字体没有给出实际的px或pt定义的话，会有⼀个默认值：12pt即16px，对应浏览器中“字体⼤⼩”中的“中等”，以这个为标准，变⼤或缩⼩。（只适⽤于IE，在FF中，即便定义px或pt也都可以变⼤变⼩）
所以，从这个概念上看，em才是真正的“相对单位”（百分⽐嘛，当然是相对），⽽px和pt都是绝对单位（都有固定值）。
在⽹页设计中，⾯向⽤户的屏幕的基本单位是px，因此使⽤px作为单位是最简单也最容易理解的，⽽pt也不过是通过了Windows的设置乘上了⼀个⽐率转变成px再显⽰，算是绕了个圈⼦。参考⼤部分⼤型⽹站，包括Adobe和Microsoft，都是使⽤px作为单位，⽽且在HTML中，默认的单位就是px，是不是也暗⽰着px是⽹页设计的“内定单位”？
但在Word或Photoshop中，使⽤pt就相当⽅便。因为使⽤Word和Photoshop的主要⽬的都不是为了屏幕浏览，⽽是输出打印。当打印到实体时，pt作为⼀个⾃然长度单位就⽅便实⽤了：⽐如Word中普通的⽂档都⽤“宋体 9pt”，标题⽤“⿊体 16pt”等等，⽆论电脑怎么设置，打印出来永远就是这么⼤。⼜或者在Photoshop中，设置⼀个图⽚中的某个艺术效果的字体是72pt⼤⼩，然后分别将这张图⽚设为300DPI和72DPI，再打印出来，就可以看出，这2个字体⼤⼩完全⼀样，只是“清晰度”不同，300DPI更清晰。这是毫⽆疑问的结果。
  最后整理⼀下所有出现过的单位：
  px：pixel，像素，屏幕上显⽰的最⼩单位，⽤于⽹页设计，直观⽅便；
  pt：point，是⼀个标准的长度单位，1pt＝1/72英⼨，⽤于印刷业，⾮常简单易⽤；
  em：即％，在CSS中，1em＝100％，是⼀个⽐率，结合CSS继承关系使⽤，具有灵活性。
  PPI（DPI）：pixel（dot）per inch，每英⼨的像素（点）数，是⼀个率，表⽰了“清晰度”，“精度”PX和PT转换的公式：
以前在⽂章中介绍过PX和PT的转换规则，其实很简单，pt=px乘以3/4。
⽐如12px×3/4=9pt⼤⼩。
PX和em转换的公式：
对于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%
5.5pt
8px
0.5em
50%
6pt
9px
0.563em
56.30%
7pt
10px
0.625em
62.50%
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
100种不同的字体----------16px
1em 100% 12pt
17px 1.063em 106.30% 13pt
18px 1.125em 112.50% 14pt
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
-
-----------
字号磅数毫⽶
⼋号 5磅 1.84
七号 5.5磅 2.12⼩六号 6.5磅 2.45六号 7.5磅 2.81⼩五号 9磅 3.15五号 10.5磅 3.70⼩四号 12磅 4.25四号 14磅 4.93
⼩三号 15磅 5.23三号 16磅 5.55
⼩⼆号 18磅 6.37⼆号 22磅 7.80
⼩⼀号 24磅 8.42
⼀号 26磅 9.66⼩初号 36磅 11.1初号 42磅 12.7

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。