建議學習時長： 30分鐘
學習方式：了解
學習目標
- 了解什么是響應式樣
- 知道頁面的 viewport 該怎么設置
- 了解 CSS像素和設備像素的區(qū)別
詳細介紹
響應式布局是當今流行的一個設計理念，隨著移動互聯(lián)網(wǎng)的盛行，為解決各式各樣的瀏覽器分辨率以及不同移動設備的顯示效果。簡單來說，讓同一個頁面在不同大小的設備上看著都ok。
基礎概念
viewport
移動設備上的 viewport 就是設備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域，再具體一點，就是瀏覽器上用來顯示網(wǎng)頁的那部分區(qū)域。viewport 是可以設置的。一般這么設置，讓viewport的寬度等于設備的寬度：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
想了解更多，可以閱讀下面的兩篇文章：
設備像素比率（Device Pixel Ratio，DPR）
CSS 中的1px并不等于設備的1px！
設備像素即屏幕設置的分辨率。設置的分辨率不一定等于顯示器的物理分辨率，大多數(shù)情況下，我們設置的分辨率與物理分辨率一致，顯示效果才最佳。
CSS像素指在CSS中的單位PX。
- 在縮放級別為100%時，設備像素比率為1的設備上，1個CSS像素等于1個設備像素。
- 在縮放級別為100%時，retina設備上，1個CSS像素等于4個設備像素。
- 在縮放級別為100%時，設備像素比率為1.5的設備上，1個CSS像素等于1.5個設備像素。
- 在縮放級別為200%時，設備像素比率為1的設備上，1個CSS像素等于4個設備像素。
