像素(px)到底是个什么单位
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作为单位并没有直接关联。
像素(px)到底是个什么单位的更多相关文章
- android-getTextSize返回值是以像素(px)为单位的,setTextSize()以sp为单位
使用如下代码时,发现字号不会变大,反而会变小:size = (int) mText.getTextSize() + 1;mText.setTextSize(size);后来发现getTextSize返 ...
- Android 中像素px和dp的转化
在Android的布局文件中,往往使用dp作为控件的宽度和高度尺寸,但是在Java代码中,调用getWidth()方法获得的尺寸单位却是像素px,这两个单位有明显的区别:dp和屏幕的密度有关,而px与 ...
- Android px、dp和sp单位区别
[转]http://www.cnblogs.com/bjzhanghao/archive/2012/11/06/2757300.html 在调整布局的时候,某些控件的大小需要设置单位: px: 即像素 ...
- 字体的大小(pt)和像素(px)如何转换?
px:相对长度单位.像素(Pixel). pt:绝对长度单位.点(Point). 1in = 2.54cm = 25.4 mm = 72pt = 6pc 具体换算是: Points Pixels Em ...
- js根据毫米/厘米算像素px
<html><meta http-equiv="content-type" content="text/html;charset=utf-8" ...
- 小程序-支持的最小像素px
经过我手机多次测试,支持的最小px为: 8px;
- 微信小程序开发 [06] 一些补充的知识点
0.写在前面的话 前几章的内容串联起来,基本上已经能写比较基础的小程序页面逻辑了,当然,wxml和wxss的我并没有写,因为前端我也并不擅长.这个章节,准备随便叨叨,然后补充一些之前没有提到的基础知识 ...
- android127 zhihuibeijing 屏幕适配
## 屏幕适配 ## 加载不同分辨率的图片是根据手机的像素来加载不同分辨率文件夹下的图片. > 先在主流屏幕来发: *(分辨率和手机屏幕大小无关), 遵循原则: 不用AbsoluteLayout ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
随机推荐
- Rabbit MQ UI 重置 用户名 密码
新增admin用户 rabbitmqctl add_user newadmin s0m3p4ssw0rd rabbitmqctl set_user_tags newadmin administrato ...
- SQL查询今天、昨天、7天内、30天【转】
SQL查询今天.昨天.7天内.30天 今天的所有数据:select * from 表名 where DateDiff(dd,datetime类型字段,getdate())=0 昨天的所有数据:sele ...
- Android图片与缩略
/** * 将图片文件原比例缩略.并使其不超过最大宽.高 * @param path : 图片文件 * @param requestW : 缩略后最大宽度 * @param requestH : 缩略 ...
- 在Fedora8上安装MySQL5.0.45的过程
本来想安装最新的5.6.13-1版本,下载下来后,依赖的包rpmlib无处下载,无法只得作罢.从Foreda8的安装光盘中找到了以下文件: mysql-5.0.45-4.fc8.i386.rpm my ...
- uploadify的java应用
API:http://www.uploadify.com/documentation/ 下载地址:http://www.uploadify.com/ 这几天查看插件,发现uploadify插件做不错, ...
- 如何使用千千静听为MP3添加专辑封面和文字信息
使用千千静听播放器打开某MP3文件,右击该文件,选择属性. 2 点击专辑封面即可添加或更换专辑封面 点击保存到文件再点击重新读取文件即可发现有效了 3 为MP3批量添加添加封面 选中播放列表的所有文件 ...
- 用L脚本语言实现"L脚本语言控制台"
下载Windows平台解释引擎 L脚本语言中能够将随意字符串当做一行L脚本语言程序来运行.通过循环接收用户输入,就是一个控制台IDE了 #scp #scp没有控制台IDE?我们自己用scp来实现一个 ...
- nodejs检查已安装模块
命令行 npm ls --depth 0
- ios Mac 地址获取
//mac address #include <sys/socket.h> // Per msqr #include <sys/sysctl.h> #include <n ...
- 【树莓派】制作树莓派所使用的img镜像(一)
最近一直在折腾树莓派,前几天装了10台设备,最近又来了15台开发板子.基本每台设备都需要进行如下操作: 1.安装树莓派OS,并配置键盘.时区.语言编码格式等: 2.新增组.用户.配置静态IP地址: 3 ...