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-width:960px)" href="css/gt-960px.css">
當頁面寬度大於等於960px時，載入樣式表gt-960px.css
1 <link rel="stylesheet" type="text/css" media="screen and (min-width:600px) and (max-width: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-width:600px)" href="css/lt-600px.css">
當頁面寬度小於等於600px時，載入樣式表lt-600px.css
2.樣式表中內嵌發
@media screen and(){
}
3.彈性圖片
彈性圖片
我們需要為圖片設置max-width: 100%和height: auto，來實現其彈性化。
1 img {
2 max-width: 100%;
3 height: auto;
4 width: auto9; /* ie8 */
5 }