像素和屏幕分辨率

在讲解响应式设计技术之前需先了解物理设备中关于屏幕适配的常用术语

在讲解响应式设计技术之前,需要先了解物理设备中关于屏幕适配的常用术语,比如像素,屏幕分辨率,设备像素(device-width)和CSS像素等,有助于读者理解响应式设计的实现过程。


1.像素与分辨率


全称为图像元素,是网页布局的基础,一个像素就是计算机屏幕能显示一特定颜色的最小区域。屏幕分辨率,就是屏幕上显示的像素个数,以水平分辨率和垂直分辨率来衡量大小。例如:分辨率1600*1200的意思是水平方像素为1600个,垂直方向像素为1200个,屏幕尺寸一样的情况下,分辨率越高,显示效果就越精细。响应式布局手机屏幕分辨率的效果如图6-35所示。


2.设备像素


设备像素是物理概念,指的是设备中使用的物理像素。比如iPhone5的屏幕分辨率640*1136px。衡量一个物理设备的屏幕分辨率高低,使用ppi,即像素密度,表示每英寸所拥有的像素数目。ppi的数值越高,代表屏幕能以更高的密度显示像素。


3.CSS像素


CSS像素是网页编程的概念,指的是CSS样式代码中使用的逻辑像素。在CSS规范中,长度单位可以分为两类,即绝对(absolute)单位和相对(relative)单位。px是一个相对单位,相对的是设备像素(evice pixel)。


设备像素和CSS像素的换算是通过设备像素比完成的,设备像素比即缩放比例,获得设备像素比后,便能知道设备像素与CSS像素之间的比例。当这个比例为1:1时,使用1个设备像素显示1个CSS像素;当这个比例为2:1时,使用4个设备像素显示1个CSS像素,当这个比例为3:1时,使用9个设备像素显示1个CSS像素。关于CSS像素和设备像素之间的换算关系,不是响应式网页设计的关键知识内容,了解相关基本概念即可。