響應式網頁設計 - 媒體查詢
什么是媒體查詢？
媒體查詢是 CSS3 中引入的一種 CSS 技術。
僅在滿足特定條件時，它才會使用 @media 規則來引用 CSS 屬性塊。
實例
如果瀏覽器窗口是 600px 或更小，則背景顏色為淺藍色：
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
添加斷點
在本教程中稍早前，我們制作了一張包含行和列的網頁，但是這張響應式網頁在小屏幕上看起來效果并不好。
媒體查詢可以幫助您。我們可以添加一個斷點，其中設計的某些部分在斷點的每一側會表現得有所不同。
桌面電腦
手機
使用媒體查詢在 768px 處添加斷點：
實例
當屏幕（瀏覽器窗口）小于 768px 時，每列的寬度應為 100％：
/* 針對桌面設備： */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* 針對手機： */
[class*="col-"] {
width: 100%;
}
}
始終移動優先設計
移動優先（Mobile First）指的是在對臺式機或任何其他設備進行設計之前，優先針對移動設備進行設計（這將使頁面在較小的設備上顯示得更快）。
這意味著我們必須在 CSS 中做一些改進。
當寬度小于 768px 時，我們應該修改設計，而不是更改寬度。我們就這樣進行了“移動優先”的設計：
實例
/* 針對手機： */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* 針對桌面： */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
另一個斷點
您可以添加任意多個斷點。
我們還會在平板電腦和手機之間插入一個斷點。
桌面電腦
平板電腦
手機
為此，我們添加了一個媒體查詢（在 600 像素），并為大于 600 像素（但小于 768 像素）的設備添加了一組新類：
實例
請注意，兩組類幾乎相同，唯一的區別是名稱（col- 和 col-s-）：
/* 針對手機： */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* 針對平板電腦： */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* 針對桌面： */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
有兩組相同的類似乎很奇怪，但是它給了我們機會用 HTML 來決定在每個斷點處的列會發生什么：
HTML 實例
對于臺式機：
第一和第三部分都會跨越 3 列。中間部分將跨越 6 列。
對于平板電腦：
第一部分將跨越 3 列，第二部分將跨越 9 列，第三部分將顯示在前兩部分的下方，并將跨越 12 列：
<div class="row"> <div class="col-3 col-s-3">...</div> <div class="col-6 col-s-9">...</div> <div class="col-3 col-s-12">...</div> </div>
典型的設備斷點
高度和寬度不同的屏幕和設備不計其數，因此很難為每個設備創建精確的斷點。為了簡單起見，您可以瞄準這五組：
實例
/* 超小型設備（電話，600px 及以下） */
@media only screen and (max-width: 600px) {...}
/* 小型設備（縱向平板電腦和大型手機，600 像素及以上） */
@media only screen and (min-width: 600px) {...}
/* 中型設備（橫向平板電腦，768 像素及以上） */
@media only screen and (min-width: 768px) {...}
/* 大型設備（筆記本電腦/臺式機，992px 及以上） */
@media only screen and (min-width: 992px) {...}
/* 超大型設備（大型筆記本電腦和臺式機，1200px 及以上） */
@media only screen and (min-width: 1200px) {...}
方向：人像 / 風景
媒體查詢還可用于根據瀏覽器的方向來更改頁面的布局。
您可以設置一組 CSS 屬性，這些屬性僅在瀏覽器窗口的寬度大于其高度時才適用，即所謂的“橫屏”方向：
實例
如果方向為橫向模式（landscape mode），則網頁背景為淺藍色：
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
用媒體查詢隱藏元素
媒體查詢的另一種常見用法是在不同屏幕尺寸上對元素進行隱藏：
實例
/* 如果屏幕尺寸為 600 像素或更小，請隱藏該元素 */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
用媒體查詢修改字體
您還可以使用媒體查詢來更改不同屏幕尺寸上的元素的字體大小：
實例
/* 如果屏幕尺寸為 601px 或更大，請將 <div> 的 font-size 設置為 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* 如果屏幕尺寸為 600px 或更小，請將 <div> 的 font-size 設置為 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @media 參考手冊
有關所有媒體類型和特性/表達式的完整概述，請在 CSS 參考手冊中參閱 @media 規則。
