現在移動互聯網越來越熱，用手機上網的人數大量增加?，F在大家常用的手機的屏幕通常在600像素以下，PC的屏幕寬度一般都在1000-2000像素。同樣的內容，要在大小迥異的屏幕上，都呈現出滿意的效果，并不是一件容易的事。 很多網站的解決方法，是為不同的設備提供不同的網頁，比如專門提供一個手機版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，會大大增加架構設計的復雜度。 于是，很早就有人設想，能不能”一次設計，普遍適用”，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整布局？
2010年，Ethan Marcotte提出了“自適應網頁設計”(Responsive Web Design)這個名詞概念，這個自適應設計就是可以自動識別屏幕寬度、并做出相應調整的網頁設計。保證了用戶在不同終端瀏覽網頁的兼容效果。
為了應用自適應 Web 設計，您需要創建一個包含適應各種設備尺寸樣式的 CSS。一旦頁面在特定的設備上加載，該頁面上使用了各種字體和 Web 開發技術，比如媒體查詢（Media Queries），此時，會先檢測設備的視口大小，然后加載特定于設備的樣式。
現在在自適應 CSS 文件中必須有 '@media' 開始的樣式。
'@media (max-width: 480px)' 開始，為最大寬度為 480 像素的設備設置樣式
'@media (max-width: 767px)' 開始，為最大寬度為 767像素的設備設置樣式。
'@media (min-width: 768px) 和 (max-width: 979px)' 開始，為最大寬度為 768 像素和最大寬度為 979 像素的設備設置樣式。
'@media (max-width: 979px)'
最后兩個區域分別以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 開始，前一個是為最小寬度為 980 像素的設備設置樣式，后一個是為最小寬度為 1200 像素的設備設置樣式。
您可以用不同的終端來打開我公司網站。域名:www.daowweb.cn，一看和測試就明白了。也可以在PC 上拖動瀏覽器窗口，改變瀏覽器的寬度大小來測試體驗。
