（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。