響應式網頁設計 - 媒體查詢
什麼是媒體查詢？
媒體查詢是 CSS3 引入的一種 CSS 技術。
它使用 @media 規則，僅當某個條件為真時才包含一組 CSS 屬性。
示例
如果瀏覽器視窗是 600px 或更小，背景色將為淺藍色
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
自己動手試一試 »
新增斷點
在本教程前面，我們製作了一個帶有行和列的網頁，它是響應式的，但在小螢幕上看起來並不好看。
媒體查詢可以幫助解決這個問題。我們可以新增一個斷點，在斷點的一側，某些設計部分會表現出不同的行為。
桌面
Phone
使用媒體查詢在 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%;
}
}
自己動手試一試 »
始終為移動裝置優先設計
移動裝置優先意味著在設計桌面或其他裝置之前，先設計移動裝置（這將使頁面在較小的裝置上顯示更快）。
這意味著我們必須對 CSS 進行一些更改。
我們不應在寬度變小於 768px 時更改樣式，而應在寬度變大於 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%;}
}
自己動手試一試 »
另一個斷點
您可以新增任意數量的斷點。
我們將在平板電腦和手機之間插入另一個斷點。
桌面
平板電腦
Phone
我們透過新增另一個媒體查詢（在 600px 處）和一組用於大於 600px（但小於 768px）裝置的新類來實現此目的。
示例
請注意，這兩組類幾乎相同，唯一的區別是名稱（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) {...}
/* 小裝置（豎向平板電腦和大型手機，600px 及以上） */
@media only screen and (min-width: 600px) {...}
/* 中等裝置（橫向平板電腦，768px 及以上） */
@media only screen and (min-width: 768px) {...}
/* 大裝置（筆記本/桌上型電腦，992px 及以上） */
@media only screen and (min-width: 992px) {...}
/* 超大裝置（大型筆記本和桌上型電腦，1200px 及以上） */
@media only screen and (min-width: 1200px) {...}
自己動手試一試 »
方向：縱向/橫向
媒體查詢還可以用於根據瀏覽器的方向更改頁面的佈局。
您可以設定一組 CSS 屬性，它們只在瀏覽器視窗寬度大於高度時應用，這被稱為“橫向”模式。
示例
如果方向為橫向模式，網頁將具有淺藍色背景。
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
自己動手試一試 »
使用媒體查詢隱藏元素
媒體查詢的另一個常見用途是隱藏不同螢幕尺寸上的元素。
示例
/* 如果螢幕尺寸為 600px 或更小，則隱藏該元素 */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
自己動手試一試 »
使用媒體查詢更改字型大小
您還可以使用媒體查詢來更改不同螢幕尺寸上元素的字型大小。
可變字型大小。
示例
/* 如果螢幕尺寸為 601px 或更大，則將 <div> 的字型大小設定為 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* 如果螢幕尺寸為 600px 或更小，則將 <div> 的字型大小設定為 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
自己動手試一試 »
CSS @media 參考
有關所有媒體型別和功能/表示式的完整概述，請參閱我們 CSS 參考中的 @media 規則。
