CSS长度单位 px和pt的区别

所属分类: 网页制作 / CSS 阅读数: 1209
收藏 0 赞 0 分享

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

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

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

但这种说法其实还是有问题,先来看看下面的例子:

看出什么名堂了么?

72px要比72pt小一些,但96px正好和72pt一样大小

让我们来调整电脑的设置:在桌面上右键 > 属性 > settings > Advanced > General > DPI setting > 96 DPI。

试着改变设置,设为72DPI,重启,再打开浏览器看:72px已经等同于72pt了。为什么?

还是再做个实验:分别用800×600和1024×768看刚才的例子,明显高分辨率下,文字就变小。而且,关键的是,无论用px还是pt,都会变小。pt并没有如有些人所说,是“绝对”的,“固定”的。

但如果用打印机把这页面打印出来,就可以看到:无论屏幕用什么分辨率,打印出来大小都是一样的(这是当然的)。

首先要分清“屏幕效果”和“打印效果”这两个概念。

在浏览网页过程中,所有的“大”“小”概念,都是基于“屏幕”这个“界面”上。“屏幕”上的各种信息,包括文字、图片、表格等等,都会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10。所以如果在定义字体大小时,使用px作为单位,那一旦用户改变显示器分辨率从800到1024,用户实际看到的文字就要变“小”(自然长度单位),甚至会看不清,影响浏览。

那是不是用pt做单位就没这样的问题呢?错!问题同样出现。刚才的例子已经很清楚的说明,在不同分辨率下,无论是px还是pt,都会改变大小 。以现在的电脑屏幕情况,还没有一种单位可以保证,在不同分辨率下,一个文字大小可以“固定不变”。因为这很难以实现也不是很有必要:全球电脑用户以亿来数,屏幕从14寸到40寸甚至更高都有,屏幕大小不同,分辨率也不同,要保证一个字体在所有用户面前大小一样,实在是MISSION IMPOSSIBLE。另外,电脑有其自身的调节性,用户可以自己来调节:1)在浏览器中调节字体大小;2)在刚才提到的显示属性里调节。

那在页面设计中到底是用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,每英寸的像素(点)数,是一个率,表示了“清晰度”,“精度”

(后记,今后的发展趋势,传统的CRT显示器将被LCD淘汰,而LCD有个特点就是分辨率固定,而不像CRT那样,一个17寸CRT可以有从640×480到1600×1200不等,但17寸LCD只有1280×1024这样一个标准分辨率,也是最大分辨率,而且占满屏幕,不会像CRT那样四周留黑边,要靠人工调节。因此以后一台电脑看网页,效果可以保持相对稳定。由于技术的发展,LCD的“精度”也越来越高,先来计算一下LCD的“精度”(PPI,DPI):

15寸LCD是1024×768分辨率,对角线长为15寸(英寸),根据勾股定理,很容易可以算出,屏幕宽度是11.55英寸,再用1024来除,得出15寸LCD是88.68DPI,其余的同理,看数据:

15"(1024*768): 88.68 DPI

17"(1280*1024): 96.42 DPI

19"(1280*1024): 86.27 DPI; 19"W(1440*900): 89.37 DPI

20"(1600*1200): 103.92 DPI; 20"W(1680*1050): 99.06 DPI

22"W(1680*1050): 90.05 DPI

24"W(1920*1200): 94.34 DPI

以前普通15寸CRT在800×600分辨率下,大约是72DPI。让我们来算算最常用的“宋体 9pt(12px)”,在各种显示器下,实际可视大小是多少:

15"CRT(800*600): 12/72=0.167英寸,大约是4.2毫米,是很大很容易辨识的,这也是为什么前几年最流行的中文字体大小

LCD: 15": 0.135英寸,17": 0.124英寸,19": 0.139英寸,19"W: 0.134英寸,20": 0.115英寸,20"W: 0.121英寸,22"W: 0.133英寸,24"W: 0.127英寸

基本上,小于0.13英寸,对于视力不太好的或者年老的用户,就会有阅读困难,小于0.12英寸,即便一般用户也会感觉吃力。所以,一般在这种情况下,要么使用16px以上的字体大小,如果还是要9pt,那就改变显示属性,间接来改变到16px以上也一样。

再看看PDA上情况,Dell有款x50v,分辨率640×480,屏幕大小为3.7寸,可以推算出,这个屏幕是惊人的224.70DPI,高的可怕,12px的字在里面几乎是难以辨认,因此换有另一种规格的字体来专门适合这些高分辨率的场合,同时这样的字体更显得清晰圆滑,接近于传统印刷。

相信不久的将来,桌面电脑系统也会如此,让我们浏览网页也能像翻阅杂志那样精美细致、赏心悦目。

更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多