单位有关问题 _Web前端

单位问题

PT 、 PX 、 EM 的区别

简说 PT 、 PX 、 EM 的区别，首先先分别介绍一下：

PT:

　 pt 全称为 point ，但中文不叫 “ 点 ” ，查英语字典可以看到，确切的说法是一个专用的印刷单位 “ 磅 ” ，大小为 1/72 英寸。所以它是一个自然界标准的长度单位，也称为 “ 绝对长度 ” 。

　　 1in = 2.54cm = 25.4 mm = 72pt = 6pc

　　因此就有这样的说法，在网页设计中， pixel 是相对大小，而 point 是绝对大小。

　　中文字号制与点数制的对照关系： {macro}{Chinese Font Size} 。 1770 年法国人狄道（ F.A.Didot ）制定点数制，规定 1 法寸为 72 点，即： 1 点 =0.3759 毫米。狄道点数制在法国、德国、奥地利、比利时、丹麦、匈牙利等国比较流行。 1886 年全美活字铸造协会以派卡（ pica ）为基准制定派卡点数制，规定 1pica=12point （点），即： fbox{1 点 =0.013837 英寸 =0.35146 毫米 } 20 世纪初派卡点数制传入我国，并得到逐步推广。在实用中对常用点数以号数命名而产生了号数制，二者换算如下（以 pt 代表 “ 点 ” ）：

　　初号 = 42pt ；小初号 = 36pt ；一号 = 28pt ；二号 = 21pt ；小二号 = 18pt ；三号 = 15.75pt ；四号 = 14pt ；

　　小四号 = 12pt ；五号 = 10.5pt ；小五号 = 9pt ；六号 = 7.875pt ；七号 = 5.25pt 。

PX:

px 就是 pixel 的缩写啦， pixel 即像素，它不是自然界的长度单位。 px 是就是一张图片中最小的点，一张位图就是由这些点构成的。 1024px 就是 1024 像素，最简单的你可以在 windows桌面属性里的 “ 设置 ” 看到，如果是 1024×768 ，也就是说水平方向上有 1024 个点，垂直方向上有 768 个点。谁能说出一个 “ 点 ” 有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为 “ 分辨率高 ” ，反之，就是 “ 分辨率低 ” 。所以，像素的大小是会 “ 变 ” 的，也称为 “ 相对长度 ” 。

EM ：

CSS 提供的测量类型尺寸

　　源自印刷界，一个 em 表示一种特殊字体的大写字母 M 的高度。在网页上，一个 em 是网页浏览器的基础文本尺寸的高度，它一般情况下是 16px 。然而，任何人都可以改变这个基础尺寸的设置，因此 1em 对于有的人来说可能是 16px ，但是在其他人的浏览器上可能是 24px 。换句话说， em 是一个相对的度量单位。

　　除了浏览器的初始字号设置之外， em 也可以从包含标签中继承尺寸信息。一个 .9em 的类型尺寸将使文本在大部分以 16px 为基础尺寸的显示器上为大约 14px 高。但是如果你有一个带 .9em 的字号的 <p> 标签，然后在这个 <p> 标签中有一个带 .9em 的自豪的 <strong> 标签，这个 <strong> 标签的 em 尺寸就不是 14px 而是 12px （ 16*.9*.9 ）。因此在使用 em 值时要记住继承这个特性。

综上所述： px 是一个点，它不是自然界的长度单位，谁能说出一个 “ 点 ” 有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为 “ 分辨率高 ” ，反之，就是 “ 分辨率低 ” 。所以， “ 点 ” 的大小是会 “ 变 ” 的，也称为 “ 相对长度 ” 。

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

px 会随显示器的分辨率而改变， pt 会随 Windows 系统字体大小设置而改变。

设置 Windows 系统字体大小：桌面上右键 > 属性 > 设置 > 高级 > 常规 > DPI 设置，默认的是 “ 正常尺寸 96DPI” ，你可以自定义修改。

px 和 pt 的使用区别，只有当用户改变默认的 96DPI 下才会产生：使用 px 定义文字，无论用户怎么设置，都不会改变大小；使用 pt 定义文字，当用户设置超过 96DPI 的值，数值越大，字体就越大。

转换计算公式： px = pt * DPI / 72

在网页设计中，面向用户的屏幕的基本单位是 px ，因此使用 px 作为单位是最简单也最容易理解的，而 pt 也不过是通过了 Windows 的设置乘上了一个比率转变成 px 再显示，算是绕了个圈子。参考大部分大型网站，包括 Adobe 和 Microsoft ，都是使用 px 作为单位，而且在 HTML 中，默认的单位就是 px 。

但在 Word 或 Photoshop 中，使用 pt 就相当方便。因为使用 Word 和 Photoshop 的主要目的都不是为了屏幕浏览，而是输出打印。当打印到实体时， pt 作为一个自然长度单位就方便实用了：比如 Word 中普通的文档都用 “ 宋体 9pt” ，标题用 “ 黑体 16pt” 等等，无论电脑怎么设置，打印出来永远就是这么大。又或者在 Photoshop 中，设置一个图片中的某个艺术效果的字体是 72pt 大小，然后分别将这张图片设为 300DPI 和 72DPI ，再打印出来，就可以看出，这 2 个字体大小完全一样，只是 “ 清晰度 ” 不同， 300DPI 更清晰。这是毫无疑问的结果。

DPI=96 时
9pt=12px

px 单位名称为像素，相对长度单位，像素（px ）是相对于显示器屏幕分辨率而言的国内推荐；
em 单位名称为相对长度单位 。相对于当前对象内文本的字体尺寸，国外使用比较多；
pt 单位名称为点（Point ）， 绝对长度单位一般老版本的table 使用长度大小单位但是现在基本上没有使用。

1. 以前IE 无法调整那些使用px 作为单位的字体大小, 但现在几乎IE 都支持在这里也推荐使用PX 作为单位;

2. 国外的大部分网站能够调整的原因在于其使用了em 作为字体单位;

3. Firefox 能够调整px 和em ，但是96% 以上的中国网民使用IE 浏览器( 或内核) 。

px 像素(Pixel) 。相对长度单位。像素px 是相对于显示器屏幕分辨率而言的，QQ 截图也是使用PX 作为长度宽度单位。

em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

em 与px 换算? - ?TOP
任意浏览器的默认字体高度16px （16 像素）。所有未经调整的浏览器都符合: 1em=16px 。那么12px=0.75em,10px=0.625em 。为了简化font-size 的换算，需要在css 中的body选择器中声明font-size=62.5% ，这就使em 值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px 数值除以10 ，然后换上em 作为单位就行了。

em 单位有如下特点： ? - ?TOP

　　1. em 的值并不是固定的;

　　2. em 会继承父级元素的字体大小。

我们在写CSS 的时候如果要用em 为单位，需要注意两点：

　　1. body 选择器中声明Font-size=62.5%;

　　2. 将你的原来的px 数值除以10 ，然后换上em 作为单位;

　　3. 重新计算那些被放大的字体的em 数值。避免字体大小的重复声明。

　　也就是避免1.2 * 1.2= 1.44 的现象。比如说你在#content 中声明了字体大小为1.2em ，那么在声明的字体大小时就只能是1em ，而不是1.2em, 因为此em 非彼em ，它因继承#content 的字体高而变为了1em=12px 。

　　但是12px 汉字例外，就是由以上方法得到的12px(1.2em) 大小的汉字在IE 中并不等于直接用12px 定义的字体大小，而是稍大一点。这个问题 Jorux 已经解决，只需在body 选择器中把62.5% 换成63% 就能正常显示了。原因可能是IE 处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

推荐网页单位? - ?TOP
所以为了单位换算错误推荐使用PX （像素）作为网页制作单位。

以上为大家介绍了px em pt 单位，及换算方式，一般现在我们使用长度单位都以px 为长度单位。这里我们也推荐使用以px （像素）为网页的尺寸长度单位 ，符合浏览器的像素单位，同时也为了方便计算长度尺寸。

??????????????????????????????????????????????????????????????????????????????????????????????????????????????? 于井龙

? ?????????????????????????????????????????????????????????????????????????????????????????????????????? 2011 年 10 月 28 日