come on babay

come on babay,Love me ,love yourself.

2007/04/23

 

pt, px,em,ex,in


在做网页的时候,一个朋友说,网页的标准字体是9pt 宋体,,我一般是用px ,我用了14px,px和pt 有什么区别呢?
--

在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位。它们各是什么意思,有什么区别呢?

在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能够精确地表示元素在屏幕中的位置和大小,网页主要是为了屏幕显示,而不是为了打印等其它需要的。


我的网络营销boogger
http://china-news-it.blogspot.com





<< 主页

存档

2007/4/8 - 2007/4/15   2007/4/15 - 2007/4/22   2007/4/22 - 2007/4/29   2007/4/29 - 2007/5/6   2007/5/6 - 2007/5/13   2007/5/13 - 2007/5/20   2007/5/20 - 2007/5/27   2007/5/27 - 2007/6/3   2007/6/3 - 2007/6/10   2007/6/10 - 2007/6/17   2007/6/17 - 2007/6/24   2007/6/24 - 2007/7/1   2007/7/8 - 2007/7/15   2007/12/2 - 2007/12/9   2007/12/9 - 2007/12/16   2007/12/16 - 2007/12/23   2009/10/18 - 2009/10/25   2010/1/10 - 2010/1/17  

This page is powered by Blogger. Isn't yours?

订阅 评论 [Atom]