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