精华内容
下载资源
问答
  • 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;而pt就是point,是印刷行业常用单位,等于1/72英寸。
  • HTML/CSS 长度单位 px和pt的区别

    千次阅读 2018-05-26 00:13:41
    CSS长度单位 px和pt的区别先说一下基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;而pt就是point,是印刷行业常用单位,等于1/72英寸。可以知道,px是一个点,它不是自然界的长度单位,谁能说出一...


    先说一下基本概念: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 点)





    展开全文
  • 关于字体的px和pt

    2020-04-11 17:10:29
    字体大小的设置单位,常用的有2种:pxpt。这两个有什么区别呢? 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点; pt就是point,是印刷行业常用单位,等于1/72英寸。 这样很明白,px是...

    字体大小的设置单位,常用的有2种:px、pt。这两个有什么区别呢?

    先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;

    pt就是point,是印刷行业常用单位,等于1/72英寸。

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

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

    因此就有这样的说法,pixel是相对大小,而point是绝对大小。

     

    分清“屏幕效果”和“打印效果”:

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

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

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

     

    PX和PT转换的公式:

    以前在文章中介绍过PX和PT的转换规则,其实很简单,pt=px乘以3/4。

    比如12px×3/4=9pt大小。

    PX和em转换的公式:

    对于PX转em的方法也类似,就是em=16乘以px,也就是说1.5em=1.5×16=24px。
    ————————————————
    版权声明:本文为CSDN博主「正直的长颈鹿」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/zhangrongxi5/article/details/79864286

    展开全文
  • px和pt的区别

    2012-11-15 13:14:39
    字体大小的设置单位,常用的有2种:pxpt。这两个有什么区别呢? 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点; pt就是point,是印刷行业常用单位,等于1/72英寸。 这样很明白...
    
    
    展开全文
  • 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;而pt就是point,是印刷行业常用单位,等于1/72英寸。 这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个“点”有多长多大么?...

    先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;而pt就是point,是印刷行业常用单位,等于1/72英寸。

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

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

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

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

    文字72px

    文字72pt

    文字96px

    看出什么名堂了么?

    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的字在里面几乎是难以辨认,因此换有另一种规格的字体来专门适合这些高分辨率的场合,同时这样的字体更显得清晰圆滑,接近于传统印刷。

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

    转自:cnblogs若得山花插满头,莫问奴归处!

    转载于:https://www.cnblogs.com/william-lee/archive/2010/08/22/1805984.html

    展开全文
  • 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;而pt就是point,是印刷行业常用单位,等于1/72英寸。 这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个“点”有多长多大么...
  • 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;而pt就是point,是印刷行业常用单位,等于1/72英寸。这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个“点”有多长多大么?...
  • 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;而pt就是point,是印刷行业常用单位,等于1/72英寸。 这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个“点”有多长多大么?...
  • 不同设备有不同的显示效果,这个设备硬件有关,一般我们为了支持WVGA、HVGAQVGA 推荐使用这个,不依赖像素。   dp: dip是一样的  px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素...
  • pxpt、dp sp

    2016-09-20 15:41:58
    学习Android几个月了,一直还是没分清楚pxpt、dp sp。每次都混淆,所以这次干脆自己做做笔记。 px 是像素的意思,即屏幕中可以显示的最小元素单元,我们应用里任何可见的东西都是由一个个像素点组成的。  pt ...
  • pxpt

    2018-01-03 09:43:00
    px:pixel,像素,屏幕上显示的最小单位,用于网页设计,直观方便; pt:point,是一个标准的长度... PPI(DPI):pixel(dot)per inch,每英寸的像素(点)数,是一个率,表示了“清晰度”,“精度”PX和PT转换...
  • pt和px区别 pt是逻辑像素,px是物理像素字体大小的设置单位,常用的有2种:pxpt。这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;pt就是point,是印刷行业常用单位,...
  • ptpx和em

    2016-10-03 10:01:00
    pt、px和em都是网页中设置字体大小的单位。 pt:点,point,确切的说法是一个专用的印刷单位“磅”,也称为“绝对长度”。 px:像素,pixel,是相对...PX和PT转换的公式:pt=px乘以3/4。 PX和em转换的公式:就...
  • px/pt和em/rem的差别

    2017-10-02 09:29:15
    转自:... ... pt:绝对大小,是印刷行业常用单位,等于1/72英寸。...px:相对大小,表示pixel,像素,是屏幕上显示数据的最基本的点。...1px=0.75pt,常见的宋体9pt=12pxpx = pt * DPI
  • 单位px,pt,dp,sp

    2017-07-03 22:02:00
    这两种用于pc的开发绰绰有余,但是基于现在手机像素比各不相同,单位英寸下的像素个数不同,所以使用px和pt在不同像素的手机上显示效果不同。为了解决这个问题,产生了下面的两种单位。 2.dp又叫dip,是密度无关...
  • pxpt和em的区别

    2013-11-27 15:23:34
    老是被人问到pxpt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之。点击查看原文 这里引用的是Jorux的“95%的中国网站需要重写CSS...
  • pxpt、dp sp

    2016-04-12 19:13:00
    px是像素,即屏幕中可以显示的最小元素单元,我们应用里任何可见的东西都 是由一个个像素点组成的。单独一个像素点非常的微小,肉眼是无法看见的,可是当许许多 多的像素点聚集到一起时,就可以拼接成五彩缤纷的图案...
  • pt px

    2018-01-01 19:55:02
    pt也成为逻辑分辨率 pt的大小屏幕尺寸有关系,px指物理分辨率,屏幕尺寸没有关系 1个pt可以由1个px构成,也可以2个或者多个 iphone6 1pt=2px

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,503
精华内容 601
关键字:

px和pt