視訊教程觀看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015
現在我們對響應式設計有了一個基本的瞭解，那麼現在，我們將使用media query也就是媒體查詢，來根據頁面的寬度調整頁面的佈局。
這裡我們新建一個專門用於響應式網頁設計的CSS，所以，檔案=》新建，儲存。我會把檔案命名為response.css。
現在，我們將這個css檔案包含在我們的HTML中。所以我們來到index.html，我們想把它放在main.css之後。所以我們來複制這一行。跳過一行並貼上它，然後，把main.css，改為response.css：
| <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css"> |
現在，我們把這個更改應用到其他2個HTML檔案中，所以我們來儲存一下。來到about.html。在main.css之後，我們來貼上respond.css。儲存about.html，轉到contact.html並貼上儲存。
我們要在main.css之後新增這個檔案的原因是因為我們將在移動樣式基礎之上建立平板電腦和桌面樣式。
所以，我們進入respond.css檔案。我們來寫一些媒體查詢。這裡使用特殊的CSS語法：
所以，我要輸入一個@，然後輸入一個單詞，media，然後是一個空格，然後是單詞，screen，空格，以及關鍵字and，在括號內，我要輸入，媒體特性min-width。並將其設定為480畫素。然後我要新增兩個花括號：
| @media screen and (min-width:480px){
} |
到目前為止，這會告訴瀏覽器，screen是媒體型別的一種，我們基於這種媒體型別進行判斷。接下來，and關鍵字之後，我們的最小寬度為480個畫素。所以，只有2個判斷都是真的，才會執行花括號中的內容。
所以說。如果媒體型別不是螢幕，比如說聽覺裝置或印表機，或者如果最小寬度小於480畫素，就不會新增這些樣式。也就是說。任何比480px更大的螢幕都將應用大括號裡的這些樣式。
在這些花括號內，我們可以按照通常的方式編寫CSS，只有當我們的媒體查詢是真實的，括號中的CSS程式碼才會被應用。
所以讓我們做一個測試，給一個非常明顯的變化。我們會說body，背景設定為navy。
| @media screen and (min-width:480px){
body{
backgound:navy;
}
} |
現在，如果我們儲存，切換到我們的網站，並重新整理頁面。我們調整瀏覽器的大小，我們你看。螢幕寬度大於480px，背景顏色就會變化。
接下來，我們再新增一個媒體查詢，所以，我們將鍵入@，media，screen，並在括號中輸入最小寬度660畫素。然後我們將開啟我們的大括號，再次通過改變整個背景顏色來做區分。我們會說background:darkgreen：
| @media screen and (min-width:660px){
body{
background:darkgreen;
}
} |
所以我們來儲存一下。切換到我們的瀏覽器並重新整理頁面。
我們可以調整瀏覽器寬度，當超過660畫素時，我們看到它正在從海軍藍變為深綠色。然而，如果它低於660畫素，但它高於480，背景顏色更改為海軍藍。這些樣式只是用於測試，在下一個視訊中，我們將刪除它們，並新增更多的樣式。
在這裡，您會注意到我們的媒體查詢按特定順序排列。這是CSS的層疊性質在起作用。在最小的尺寸下，它會main.css的樣式。然後，在我們的第一個媒體查詢中，我們覆蓋main.css中設定的背景顏色。在我們的第二次媒體查詢中，我們再次覆蓋第一次媒體查詢設定的背景顏色。通過利用層疊的特性，我們可以編寫與之前大小不同的CSS，而不是重寫所有內容。
更多精彩內容盡在視訊中！
本文固定連結：
http://www.oxox.work/web/html-css/media-query/ | 虛幻大學檢視原文：
http://www.oxox.work/web/html-css/media-query/