1.像素
物理像素/设备像素
物理像素也被称为设备像素，它是显示设备最微小的物理部件。
屏幕密度 通常以每英寸有多少物理像素来计算（PPI）
独立像素/css像素，是一个抽象的单位，主要用于浏览器上，用了精确度量web页面上的内容。一般情况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”
在一个标准的显示密度下，一个CSS像素对应着一个设备像素。
独立像素比/window.devicePixelRatio window.devicePixelRatio=物理像素/独立像素
通过计算你会发现刚才的两种手机的结果分别是1或者2（当然还有其它手机屏幕结果有些差别）
手机屏幕分为： 一：非视网膜屏幕（物理像素320，该设备的独立像素（视区宽度）也是320）
二：视网膜屏幕（物理像素640，该设备的独立像素（视区宽度）还是320
<meta name="viewport"content="width=device-width"> 这个代码的作用就是让视图区域撑满手机物理屏幕。
html文件头部加上这个代码后，手机显示的大小和电脑显示的大小尺寸大小就一样了。 但是手机上显示的图片就模糊了，这是因为你要显示同样的物理大小，视网膜屏幕就要用双倍的物理像素来显示（一个一像素的图片，如果用浏览器4个像素（即放大了一倍）来看会变模糊和失真，所以在给手机做图片的时候，要放大一倍，就是在手机上显示的图片是100乘以100，那ps做图片要做成200乘以200这样才会清晰）。
笔记本的分辨率：
10-12英寸（上网本）1024×600、1366×768
13.3-15.6英寸大部分是1366×768
13英寸有1280×800、1600×900
15英寸有1600×900、1920×1080（单屏最高分辨率）
还有18、19英寸的，分辨率也是1920×1080
华硕三屏笔记本是1920×1080的3倍。
响应式布局方式：
1.外联样式表
在这里我们可以根据不同的设备载入不同的CSS样式表
1 <link rel="stylesheet" type="text/css" media="screen and (min-960px)" href="css/gt-960px.css">
当页面宽度大于等于960px时，载入样式表gt-960px.css
1 <link rel="stylesheet" type="text/css" media="screen and (min-600px) and (max-960px)" href="css/gt-600px-lt-960px.css">
当页面宽度大于等于600px且小于等于960px时，载入样式表gt-600px-lt-960px.css
1 <link rel="stylesheet" type="text/css" media="screen and (max-600px)" href="css/lt-600px.css">
当页面宽度小于等于600px时，载入样式表lt-600px.css
2.样式表中内嵌发
@media screen and(){
}
3.弹性图片
弹性图片
我们需要为图片设置max- 100%和height: auto，来实现其弹性化。
1 img {
2 max- 100%;
3 height: auto;
4 auto9; /* ie8 */
5 }