HTML/CSS 长度单位 px和pt的区别

先说一下基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；而pt就是point，是印刷行业常用单位，等于1/72英寸。

可以知道，px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”，由此可知像素点可以随着显示屏的分辨率的变大而变小，反之亦是。所以，“点”的大小是会“变”的，也称为“相对长度”。

pt全称为point，但中文不叫“点”，它大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。

不管是px还是pt，他们都会随着分辨率的变大而变小，因为不管是文字、图片还是表格等等在界面显示的东西，都是通过像素点的分布来呈现出来的，所以包括pt在内的所有长度单位基于屏幕进行显示的时候，都统一先换算成为像素的多少，然后进行显示。因此就计算机的屏幕而言，相对长度和绝对长度没有本质差别。任何单位其实都是像素，差别只是比例不同。但是，无论屏幕用什么分辨率，对pt打印出来大小都是一样的，因像素点大小可以跟着分辨率变化，pt转换为像素点后也会跟着变化，但无论怎样，pt的实际值是不变的，换句话说，就是基本的长度单位可能不是像素，而是其它的和生活中的度量单位一致的单位了，比如日常的打印机。

当然，对于网页来说，使用哪种比较好呢？

其实我更偏向于px，因为网页更加偏向于屏幕显示。

CSS相对长度单位(relative length unit)

CSS相对长度单位中的相对二字，表明了其长度单位会随着它的参考值的变化而变化，不是固定的。

以下是CSS相对长度单位列表：

CSS相对长度单位	说明
em	元素的字体高度The height of the element's font
ex	字母x的高度The height of the letter "x"
px	像素Pixels
%	百分比Percentage

CSS绝对长度单位(absolute length unit)

绝对长度单位是一个固定的值。比如我们常用的有mm，就是毫米的意思。

以下是CSS绝对长度单位列表：

CSS绝对长度单位	说明
in	英寸Inches (1 英寸 = 2.54 厘米)
cm	厘米Centimeters
mm	毫米Millimeters
pt	点Points (1点 = 1/72英寸)
pc	皮卡Picas (1 皮卡 = 12 点)

 最近开了个公众号用于推送前端学习总结，有更多有趣有用的文章在这里推送，请多多关注 。