`
hax
  • 浏览: 962838 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

像素(px)到底是个什么单位

    博客分类:
  • CSS
阅读更多
px,对于许多网页设计者来说,是最常用的CSS长度单位。然而,1px到底多长,恐怕没有多少人回答得上来。

CSS长度本身有绝对长度和相对长度的区分。

cm、pt之类的都是绝对长度,它们是物理长度——1cm是1/100米,而1米则大约是光在1秒钟内跑过距离的3亿分之一。(至于光速和1秒的精确值到底是多少,请查阅维基百科光速条目和条目。)1pt则是1/72英寸,而1英寸换算到公制是2.54cm。

而em、ex,以及百分比,则是相对长度。比如em相对于当前字体大小,百分比则根据属性定义不同有不同涵义,例如margin的值如果是百分比,表示是相对于父元素的width。


然而,px是什么?

一般而言,pixel(像素)是图像的基本采样单位。详细解释见维基像素条目。所以它不是一个确定的物理量,也不是一个具体的点或者小方块(尽管可以用点和小方块来呈现),而是一个抽象概念。

不同的设备,其图像基本单位是不同的,比如显示器的点距,可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点,也可以认为是打印机的物理像素,300DPI就是0.085mm,600DPI就是0.042mm。

注意,我们通常所说的显示器分辨率,其实是指桌面设定的分辨率,而不是显示器的物理分辨率。只不过现在液晶显示器成为主流,由于液晶的显示原理与CRT不同,只有在桌面分辨率与物理分辨率一致的情况下,显示效果最佳,所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。

按照CSS规范的定义,CSS中的px是一个相对长度,它相对的,是viewing device的分辨率。这个viewing device,通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI,也就是1像素为1/96英寸(实际上,假设我们的显示器分辨率都与物理分辨率一致,而液晶点距其实是0.25mm到0.29mm之间,所以不太可能是正好1/96英寸,而只是接近)。

一般来说,px就是对应设备的物理像素,然而如果输出设备的解析度与电脑显示器大不相同,输出效果就会有问题。例如打印机输出到纸张上,其解析度比电脑屏幕要高许多,如果不缩放,直接使用设备的物理像素,那电脑上的照片由600DPI的打印机打出来就比用显示器看小了约6倍。

所以CSS规定,在这种情况下,浏览器应该对像素值进行缩放调节,以保持阅读体验的大体一致。也就是要保持一定像素的长度在不同设备输出上看上去的大小总是差不多。

怎样确保这一点呢?直接按照设备物理像素的大小进行换算当然是一个方式,但是CSS考虑得更多,它建议,转换应按照“参考像素”(reference pixel)来进行。

眼睛看到的大小,取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西,与1米远处的10厘米见方的东西,看上去的大小差不多是一样的,所谓一叶障目不见泰山,讲的就是这个常识。

因此CSS规范使用视角来定义“参考像素”,1参考像素即为从一臂之遥看解析度为96DPI的设备输出(即1英寸96点)时,1点(即1/96英寸)的视角。

请注意这个差别——CSS规范定义的参考像素并不是1/96英寸,而是1/96英寸在一臂之遥的看起来的视角。通常认为常人臂长为28英寸,所以其视角可以计算出来是0.0213度。(即(1/96)in / (28in * 2 * PI / 360deg) )

我们在使用不同设备输出时,眼睛与设备输出的典型距离是不同的。比如电脑显示器,通常是一臂之距,而看书和纸张时(对应于打印机的设备输出),则通常会更近一些。看电视时则会更远,比如一般建议是电视机屏幕对角线的2.5到3倍长——如果你是个42'彩电,那就差不多是3米远。看电影的话……我就不知道多远了,您自己量吧。

因此,1参考像素:
对于电脑显示器是0.26mm(即1/96英寸);
对于激光打印机是0.20mm(假设阅读距离通常为55cm,即21英寸);

而换算时,对于300DPI的打印机(即每个点是1/300英寸),1px通常会四舍五入到3dots,也就是0.25mm左右;而对于600DPI的打印机,则可能四舍五入到5dots,也就是0.21mm。


上图中,左边的屏幕(可以认为是电脑屏幕)的典型视觉距离是71厘米即28英寸,其1px对应了0.28mm;而右边的屏幕(可以认为是你的42寸高清电视)的典型视觉距离是3.5米即120英寸,其1px对应1.3mm。42寸的1080p电视,分辨率是1920*1080,则其物理像素只有0.5mm左右,可见确实是高清哦。

综上,px是一个相对单位,而且在特定设备上总是一个近似值(原则是尽量接近参考像素)。

然而,如果你把绝对单位理解为对输出效果的绝对掌控,事情却大相径庭。就网页输出的最主要对象——电脑屏幕来说,px可被视为一个基准单位——与桌面分辨率一致,如果是液晶屏,则几乎总是与液晶屏物理分辨率一致——也就是说网页设计者设定的1px,就是“最终看到这个网页的用户的显示器上的1个点距”!反倒是那些绝对单位,其实一点也不绝对。

因为绝对单位比如cm或者pt,显示在屏幕上时最后还是要换算为像素,而且这种换算不是按照像素的实际物理长度来换算的(浏览器不用知道,也不可能知道当前这台显示器的1px物理长度到底是多少),而是按照桌面设定的DPI计算的。也就是说,网页设计者指定某个字体是12pt(即1/6英寸或4.2mm),实际上你量量屏幕,几乎不可能是正好12pt,而只是接近12pt的16px(按照96DPI换算)而已。如果你的屏幕点距是0.29mm,则实际上是4.64mm或13.15pt。假如你把桌面改为大字体(120DPI),则最终12pt相当于20px,按照0.29mm点距,最终效果是16.44pt。

过去,建议网页设计者不要使用px,一个原因就是基于用户可以根据自己的需要调节桌面DPI,从而控制绝对长度的实际长度(绕口令啊)。

然而这其实是可疑的。既然绝对长度的实际长度可以根据需要调节,没有理由px这样一个相对长度不能根据需要调节。就好像照片在实际打印时你当然可以根据需要缩放一样,以px设定的字体和图像在实际显示时完全可以进行缩放——这时网页设计者指定的1px就不再对应于用户桌面的1px,而是可能对应1.2px或1.5px或其他值。

过去浏览器的调节字体大小的选项只对绝对长度有效(相当于调节浏览器内部的DPI),对px无效,这只能说是过去浏览器的设计问题,并不是px的固有问题。现在浏览器都已经支持针对以px设定的字体的缩放了。像Firefox,用户还可以选择是单单缩放字体,还是连图片一块儿缩放。所以全部使用px的“像素级精确设计”完全是可行的,也是我认为合理的设计方式。毕竟,CSS中的px本来就是要确保一致的阅读体验。至于是流式布局还是固定布局,是否能适应不同的分辨率,那是另一个话题,与是否使用px作为单位并没有直接关联。
30
6
分享到:
评论
13 楼 wenjixiao 2010-11-11  
wenjixiao 写道
由于dpi可能有所不同,如何取得当前的dpi值呢?

浏览器环境,用javascript。
12 楼 wenjixiao 2010-11-11  
由于dpi可能有所不同,如何取得当前的dpi值呢?
11 楼 hax 2009-09-24  
em是大写X高度这个我倒没听说过。我只知道ex是小写x高度,并且x-height是字体排版中的非常重要的概念。

针对屏幕的浏览器中,网页样式计算出来的最后结果(computed value或used value),都是以px为单位,而且是允许小数的。“半像素平滑”带来的区别,可以认为是在actual value上,原本必须取整,即渲染引擎只支持整数,现在渲染引擎支持了小数——虽然屏幕上的物理像素总是离散的。

你后面说的意思我反复考虑了2个小时,觉得值得深入探讨。你提出的将em用来标示“缩放友好”(实际我觉得是“文字缩放友好,text zoom friendly”,具体我们再讨论)这个问题,不仅涉及页面的设计,也涉及浏览器的设计。它还暗示了引入css新长度单位rem的必要性。有机会和你当面聊,然后再做总结。
10 楼 Tin 2009-09-24  
Hi hax,

上次看到你在我分享的friendfeed上面的评论我就想好好讨论一下这个问题了。'em'是从字体设计上面继承的一个概念,是指字模的高度,一般书上会说em能够保证不同字体的大写X的高度保持一致。那么大写X的高度就是这个字体的em。

你说的px是相对单位不仅在你说的显示器尺寸上是相对的,而且由于大部分的矢量元素的渲染来说比较先进的浏览器都支持“半像素平滑”,连像素内的颜色的投影也可以是相对的(渲染引擎会进行像素平滑的计算)。

在网页渲染的布局上来说它要转化em到px这个单位,就是说在一定的zoom下两者是等价的。

但是为什么我还是很支持使用em作为首选的字体和布局单位呢?当然这不是用来保证一行到底可以显示多少文字,因为px也可以保证。主要目的是区分布局中“缩放友好”的矢量元素(如字体,布局相关的所有html元素)和“缩放不友好”的标量元素(如很多“替换元素”是不友好的,典型的如图片,还有在使用某些Windows主题以后的input元素)。在使用webkit的浏览器,缩放会更加友好,文字和布局会随缩放变化,但是图片等却保持原有的最佳尺寸。Firefox3以后所使用的全部缩放我觉得在有些时候是有用的,可是总有它让你不爽的地方⋯⋯

比如如果你在某些设计场合希望容器变大文字尺寸不变,从而在缩放显示更多内容。另外一些地方你希望容器和文字尺寸一起变化。px和em的配合让两种需求可以比较容易的在同一个页面出现。

从设计为内容服务的角度考虑,使用em作为基本单位可以让你更集中于“内容驱动”,避免过分的”设计驱动“。我的工作范畴内前者更常见,也更符合客户的需求。
9 楼 energykey 2009-05-04  
  有深度
8 楼 jkfzero 2009-04-29  
考究派
7 楼 Army 2009-04-27  
………………
6 楼 yukaizhao 2009-04-27  
从来没有这么细致的了解这个问题 
5 楼 weskycn 2009-04-27  
px 是个相对单位早就听说过,不过一直百思不得其解,呵呵
4 楼 hax 2009-04-27  
诶,凌晨果然脑子不清楚了,光速都给搞错了。。。
3 楼 jindw 2009-04-27  
felixding 写道

过去不提倡用px?我一直都用px,12px,没遇到过什么问题。hax真勤奋啊,凌晨发文章。

据我观察,凌晨是hax最活跃的时候,只有那阵子GTalk显示为在线状态^_^
2 楼 pufan 2009-04-26  
引用
而1米则大约是光在1秒钟内跑过距离的30万分之一

有点小纰漏:光速一秒是30w公里,应该是30*1000=3万万分之一。
1 楼 felixding 2009-04-25  
过去不提倡用px?我一直都用px,12px,没遇到过什么问题。

hax真勤奋啊,凌晨发文章。

相关推荐

    px2vw一个px单位转成vw单位的VSCode插件

    这个插件的标题是"px单位转成vw单位的VSCode插件",它旨在帮助开发者快速、方便地将像素(px)单位转换为视口宽度单位(vw),以实现更灵活的响应式设计。 **px与vw单位介绍** 像素(px)是传统Web开发中最常用的...

    Android像素转换dp转px或相反

    在Android开发中,像素(px)和密度独立像素(dp/dip)是两个重要的尺寸单位。理解它们之间的转换关系对于创建适配不同设备屏幕的UI至关重要。本文将深入探讨Android像素转换,包括dp转px以及px转dp的方法,并提供...

    解决移动端1px边框问题的几种方法(5种)

    CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的物理像素是不同的。在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但在移动端,CSS的1px等于几个物理像素。 物理像素(physical...

    引用 Android上dip、dp、px、sp等单位说明

    它是硬件级别的单位,每个物理像素代表屏幕上的一个发光点。在不同的设备上,相同的px值可能会导致不同的显示效果,因为不同设备的像素密度(DPI)不同。 **计算公式**:`物理像素(px) = dp * (屏幕密度 / 160)`。 ...

    比较android px sp dip单位

    首先,像素(px)是最基础的单位,它代表显示器上一个点的实际颜色。在屏幕上,像素是不可变的,1px就是屏幕上一个实际的物理点。然而,由于不同设备的屏幕密度不同,相同数量的像素在不同设备上所占的物理空间也会...

    Android dp和px/sp等单位相互转换

    在Android开发中,理解并掌握dp、px、sp等单位之间的转换是非常重要的,因为它们直接影响到界面元素在不同分辨率和像素密度设备上的显示效果。dp(density-independent pixels)是独立像素,px(pixels)是像素,sp...

    android开发之dip,dp与px像素之间的转换工具,

    首先,像素(px)是显示器上最小的可寻址单元,每个像素有自己的颜色和亮度。在物理屏幕上,像素是固定的,但不同的设备可能具有不同的像素密度。例如,一个高清屏幕(HD)和一个超高清屏幕(UHD)同样尺寸下,像素...

    中文字号VS英文字号(磅)VS像素值的对应关系

    3. **像素值**:计算机屏幕显示中用于衡量图像或文本大小的单位,通常用“px”表示。例如,在网页设计中,常见的字体大小有12px、16px等。 ### 字号单位之间的换算 #### 英文字号(磅)与像素值的换算 英文字号与...

    styledpx2vw扩展styledcomponents具有将px转换为vw单位的功能

    "styled-px2vw"的原理是通过在`styled-components`的模板字符串中添加一个新的函数或API,允许开发者以px单位编写样式,然后自动转换为vw单位。这使得在创建适应不同屏幕大小的布局时,无需手动计算vw值,提高了开发...

    px、rem转换工具 grunt-px2rem-master

    `grunt-px2rem`是一个Grunt插件,专门用于批量处理CSS文件,将其中的px单位转换为rem,以适应移动优先的布局策略。`grunt-px2rem-master`则是这个插件的主分支或最新版本的压缩包。 **一、px与rem单位** 1. **px...

    html5px2remHTML5页面布局单位由px转换rem解决方案

    "px2rem"是解决这个问题的一种方法,它涉及到CSS中的单位转换,旨在实现更加动态和自适应的页面布局。 `px`(像素)是我们传统上使用的布局单位,它是固定的,不会根据屏幕大小变化。但在移动设备上,为了适配各种...

    postcss-pxtorem:使用PostCSS将像素单位转换为rem(根em)单位

    此脚本将从您选择的允许浏览器设置字体大小的属性中将每个px值转换为rem。 输入输出 使用默认设置,仅定位与字体相关的属性。 / / input h1 { margin : 0 0 20px; font - size : 32px; line-height : 1.2; ...

    photoshop矩形选框等工具单位更改方法:像素更改为厘米.docx

    默认情况下,Photoshop 的单位是像素(PX),但是在某些情况下,我们需要将单位更改为厘米(cm)或其他单位。那么,在 Photoshop 中如何更改矩形选框等工具的单位呢? 在本文中,我们将讲解如何将矩形选框工具的...

    android布局单位sp,dp,pt,px的区别

    px是最基础的像素单位,它直接表示屏幕上的物理像素。在设计固定的、不需适应不同屏幕尺寸的应用元素时,px可能是一个合理的选择。然而,由于不同设备的屏幕密度差异很大,使用px会导致元素在高密度屏幕上显得过小,...

    android Px,DP转换工具(可选择不同的dpi)

    在这个工具中,你可以选择不同的dpi(dots per inch,每英寸像素数)等级,包括ldpi(低密度)、mdpi(中密度)、hdpi(高密度)、xhdpi(超高密度)、xxhdpi(双超高密度)和xxxhdpi(三超高密度),来进行像素(Px...

    dip/px互转

    在Android开发中,尺寸单位是至关重要的一个概念,因为它直接影响到应用在不同设备上的显示效果。"dip"(density-independent pixels)和"px"(pixels)是Android中两种常用的尺寸单位,它们在屏幕适配和界面设计中...

    像素和毫米转换

    像素(Pixel)是数字图像的基本单位,而毫米(Millimeter)则是物理尺寸的度量单位。这两种单位之间的转换通常涉及到分辨率(DPI,每英寸点数)的概念,它是衡量打印机或显示器精度的标准。 像素转毫米的公式是: ...

    计算自己手机的屏幕宽高,density值,px 宽高,dp 的宽高,及px 和dp互转

    在Android开发中,理解和计算设备的屏幕属性是至关重要的,这包括屏幕的宽高、density值,以及像素单位px和密度无关像素dp之间的转换。这些参数对于应用的自适应屏幕显示至关重要,确保应用在不同分辨率和密度的设备...

    移动端高清1px方案

    在移动设备上,尤其是iOS和Android系统中,由于屏幕像素密度的不同,1px(像素)在物理屏幕上可能会显示为多个像素。这个问题在高分辨率屏幕上尤为突出,被称为“高清1px”问题。标题“移动端高清1px方案”所涉及的...

    postcss-px-to-viewport:PostCSS的插件,可从像素单位生成视口单位(vw,vh,vmin,vmax)。 通过一个设计尺寸在不同的显示器上创建可扩展界面的最佳选择

    的插件,从像素单位生成视口单位(vw,vh,vmin,vmax)。 演示版 如果您的项目涉及固定宽度,则此脚本将有助于将像素转换为视口单位。 输入 . class { margin : -10 px .5 vh ; padding : 5 vmin 9.5 px 1 px ; ...

Global site tag (gtag.js) - Google Analytics