【修真院 web 小课堂】手机分辨率和网页中的px是一回事吗？

大家好，我是IT修真院北京分院第38期的学员肖明明，一枚正直纯洁善良的web前端程序员，今天给大家分享一下，修真院官网css任务3，深度思考中的知识点——手机分辨率和网页中的px是一回事吗？

（1）     背景介绍：

刚开始接触css的时候会接触到px这个单位，它是写在css里的，比如一个div的宽是10px，高是10px，那么呈现在网页上就是一个宽高都是10px的盒子，那么这个px和我们平常接触到的手机的分辨率有什么关系呢？是不是1px就代表手机上的一个像素呢？

（2）     知识剖析：

先来看看什么是像素，什么是手机分辨率？

像素：手机屏幕显示出画面是由一个个发光的小点组成的，每个小点就是像素。

分辨率：分辨率是单位长度内包含像素点的数量，通常以像素每英寸ppi（pixel per inch）为单位来表示图像分辨率的大小，例如分辨率为72ppi表示每英寸包含72个像素点，分辨率越高，包含的像素点就越多，图像越清晰，但占用的存储空间就越大。

分辨率分为屏幕分辨率和图像分辨率，例如：屏幕分辨率是1280*720，就是屏幕的水平方向上有1280个像素点，垂直方向上有720个像素点；一张图片分辨率是800*500，就是说图片在没有缩放的前提下，水平方向上有800个像素点，垂直方向上有500个像素点。

像素单位的分类

上面讨论的手机上的像素叫设备像素，也叫物理像素，顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来的那天起，它上面的物理像素点就固定不变了。

物理像素是指设备屏幕实际拥有的像素点，比如iPhone6 的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone6总共有750*1334个物理像素

逻辑像素：也叫设备独立像素（Device Independent Pixel，DIP），可以理解为反映在css/js代码里的像素点数。

设备像素比（Device Pixel Ratio，DPR），一个设备的物理像素与逻辑像素之比。

比如iPhone6，我css里写一个div盒子，多宽可以把屏幕刚好占满，答案是宽375px，就能占满整个屏幕的宽度，因为iPhone6的设备像素比是2。

很久以前，物理像素和逻辑像素是没区别的，css里写1px，显示在屏幕中就是一个实际的像素点，DPR=1，比如iPhone3gs，但是后来，苹果使用了Retina技术，这种技术使用4个乃至更多的物理像素来显示一个逻辑像素，这样一来，同样的css代码设置的尺寸，在Retina 和非Retina屏幕上看起来大小是一样的，但在Retina屏幕上要精细得多。

用iPhone3gs和4s来举例，iPhone3gs得手机分辨率是320*480，而4s的手机分辨率是640*960，而两者的尺寸都是3.5寸。假设有个邮件列表页，如果还是css中1px对应1个物理像素点，那么3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。两款手机一样大，如果按照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。

在现实中，这两者效果却是一样的，这是因为Ratina屏幕把2*2个像素当一个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成两倍大小，反而和3gs效果一样，画质却更清晰。

（3）     常见问题

任务三给的psd图打开查看图片大小是640*1136像素，那么我们如果要还原这个页面那么css里的总宽高应该是多少？

（4）     解决方案

我们知道iPhone5，5s，se的分辨率是640*1136，而它们的设备像素比都是2，即两个物理像素等于一个css像素，所以我们css里要写的总宽高是设备像素除以2，即为320*568 。

（5）     编码实战

我电脑屏幕的设备分辨率是1920*1080，当前分辨率设置下逻辑分辨率是1280*720，从图中可以验证，横，纵方向的设备像素数量恰好是设备独立像素的1.5倍。这也意味着，设备独立像素的边长是设备像素的边长的1.5倍。

（6）     拓展思考

如何理解<meta name="viewport" content="width=device-width”>？

device-width 是指的设备宽，比如iPhone的屏幕宽度是由css中的宽度决定的，也就是说，在iPhone3，4，5，中，css中的320px就代表它们的屏宽，iPhone6的device-width是375px。

（7）     参考文献

【1】你真正了解像素、分辨率吗？已总结好，激情收藏！│03图像及尺寸

http://baijiahao.baidu.com/s?id=1601797930021194629&wfr=spider&for=pc

【2】CSS中的px与物理像素、逻辑像素、1px边框问题

http://www.mamicode.com/info-detail-2396539.html

【3】响应式设计——理解设备像素、设备独立像素和css像素

https://www.jianshu.com/p/6b1f94bfa263

【4】CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

https://github.com/jawil/blog/issues/21

【5】移动前端开发之viewport的深入理解

http://www.cnblogs.com/2050/p/3877280.html

【6】设备像素比devicePixelRatio简单介绍

https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

（8）     更多讨论

【1】     如何查看自己设备的设备像素比？

【答】可以通过window.devicePixelRatio查看

https://www.zhangxinxu.com/study/201208/window-device-pixel-ratio.html

【2】如何理解px是一个相对长度单位？

【答】在缩放比例为100%的情况下，一个css像素大小等于一个设备独立像素。

假设我们用pc浏览器打开一个页面，浏览器此时的宽度为800px，页面上同时有一个400px宽的块级元素容器。很明显此时块状容器应该占页面的一半。但如果我们把页面放大（通过Ctrl+“+“键），放大为200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。此时我们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，但是它看上去却变大了一倍——这是因为我们把css像素放大为了原来的两倍。也就是说默认情况下一个css像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个css像素等于了两个设备像素宽度。

【3】编写css的时候，是按照物理像素还设备独立像素去编写呢？

【答】按照设备独立像素编写。

（9）     感谢顾仁鹏师兄，此篇分享在他的帮助下完成的更好

（10）  今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~