一个是设备坐标，一个是逻辑坐标，两者是不同的。
px是个相对单位，一般像素的参考值为：在一个像素密度是90 pdi的显示器上，正常人从距离显示器28英寸处看一个像素的视角应该不小于0.0227度。
1 px定义的在设置为大字体之后不会变；pt定义的会变
2 px是相对单位，pt是绝对单位
如果大家做网页是为了浏览而不是印刷，建议大家用 px 来定义字号，理由如下：
1. 如前面 Jet 所述，px 指的是象数，象数这个概念本身就是为了显示才引用的，而 pt （磅值）很大程度上是为了印刷不出错，印刷和显示有很大的不同，这里不多说，吉吉所说的情况也是用 pt 带来的弊病。
2. Html 代码中大部分默认的单位，例如 width=10 等等，都是以 px 做为单位的，屏幕的总宽度高度也是以 px 做为单位，800*600 就是宽 800px; 高 600px; 我们把字号定义为 12px; 可以很方便的计算，例如，10个中文字 ，他的宽度就是 10*12=120，我们很容易可以写一个 width=120 的表格把他框住，这只是一个例子。
3. 请大家做一个试验，body { font-size:10.5pt; } 和 body { font-size:14.7px; } 这两种定义方法，要让 Netscape 显示那种 10.5 磅的比较优化的字号，只有定义成 14.7px 才可以，否则只有 IE 才认识。
-------------------------------------------------------------
在CSS样式表中，长度单位分两种：
相对长度单位，如px, em等
绝对长度单位，如pt,mm等
也谈px和pt的区别
经常看到有人拿px和pt比较，主要是为了争辩在确定字体大小(font-size)或其它CSS属性大小时，用什么样的CSS长度单位更加好。有人说，用pt更好，因为pt是绝对长度单位，不会因为屏幕分辨率大小，或者其它因素而改变。
我去做了一个测试，写了这样一个HTML例子。代码如下：
<html>
<head><title>CSS单位长度区别 - px和pt的区别</title></head>
<body >
<p style = "font-size:20pt;">Font-size is 20pt</p>
<p style = "font-size:20px;">Font-size is 20px</p>
</body>
</html>
我将我的显示器分别调到1024*768和800*600的分辨率(指screen resolution)。不管是用pt还是用px设置的字体，都随着分辨率变化而变化。(我使用的浏览器是IE6，其它浏览器上尚未测试过。)
我又写了另外一个HTML例子，测试一下cm(厘米)。代码如下：
<html>
<head><title>CSS长度单位的区别 - pt,px和cm的区别</title></head>
<body >
以下div宽度300pt，高度30pt： <br>
<div style = "width:300pt;height:30pt;border:1px solid blue;"></div>
以下div宽度300px，高度30px：<br>
<div style = "width:300px;height:30px;border:1px solid blue;"></div>
以下div宽度10cm，高度3cm： <br>
<div style = "width:10cm;height:3cm;border:1px solid blue;"></div>
</body>
</html>
结果是，cm(厘米)也是随着显示器分辨率变化而变化的。
对于计算机的屏幕设备而言，像素(Pixel)或者说px是一个最基本的单位，就是一个点。其它所有的单位，都和像素成一个固定的比例换算关系。所有的长度单位基于屏幕进行显示的时候，都统一先换算成为像素的多少，然后进行显示。所以，就计算机的屏幕而言，相对长度和绝对长度没有本质差别。任何单位其实都是像素，差别只是比例不同。
如果把讨论扩展到其它输出设备，比如打印机，基本的长度单位可能不是像素，而是其它的和生活中的度量单位一致的单位了。
CSS绝对长度单位是对于输出设备(output device)而言的。拿pt来说，这是一个在文字排版工具(word,adobe等)中非常常用的字体单位，不管你的显示器分辨率是1024*768，还是800*600，同一篇文档打印在纸面上的结果是一样的。
写网页用哪个长度单位更好，是px还是pt呢？
我个人比较偏向px，因为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 点)
---------------------------------------------------------------------------------------------------
One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer.
Meet the Units
“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
So, What’s the Difference?
It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.
As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
Em vs. Percent
We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.
In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).
When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.
The Verdict
In theory, the em unit is the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users. When client settings have changed, percent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design.
The winner: percent (%).
Addendum (January 2011)
It’s been a couple years since I wrote this post, and I’d like to sum up the discussion and debate that has happened in that time. Generally, when I create a new design, I will use percent on the body element (body { font-size: 62.5%; }), and then use the em unit to size it from there. As long as the body is set using the percent unit, you may choose to use either percent or ems on any other CSS rules and selectors and still retain the benefits of using percent as your base font size. Over the past couple of years, this has really become the standard in design.
Pixels are now considered acceptable font size units (users can use the browser’s “zoom” feature to read smaller text), although they are starting to cause some issues as a result of mobile devices with very high density screens (some Android and iPhone devices have upwards of 200 to 300 pixels per inch, making your 11- and 12-pixel fonts very difficult to see!). As a result, I will continue to use percent as my base font size in web documents. As always, discussion and debate is encouraged and welcome; thanks for all the great comments over the course of the past two years!
