随着移动设备浏览量的迅速增长, 自适应网页设计变得越来越重要. web 程序员在开发移动端页面时时常会遇到这样的问题, 手机设备商声明的屏幕像素宽度尺寸和网页开发时使用的 CSS 像素宽度不一致, 为什么会出现这种情况呢?
此像素非彼像素
设备像素(device pixel):
设备像素设是物理概念, 指的是设备中使用的物理像素.
比如 iPhone 5 的分辨率 640 x 1136px.
CSS 像素(CSS pixel):
CSS 像素是 Web 编程的概念, 指的是 CSS 样式代码中使用的逻辑像素.
在 CSS 规范中, 长度单位可以分为两类, 绝对 (absolute) 单位以及相对 (relative) 单位. px 是一个相对单位, 设备像素 (device pixel) 是绝对单位.
比如 iPhone 5 使用的是 Retina 视网膜屏幕, 使用 2px x 2px 的 device pixel 代表 1px x 1px 的 CSS pixel, 所以设备像素数为 640 x 1136px, 而 CSS 逻辑像素数为 320 x 568px.
设备像素与 CSS 像素之间的换算是如何产生的呢?
这就需要要谈到每英寸像素 (pixel per inch) 和设备像素比(device pixel ratio).
每英寸像素(pixel per inch):
来源: http://www.webhek.com/post/device-pixel-and-css-pixel.html