了解 CSS Media Queries 配置 RWD 網頁
最近在家閒著沒事就會看一下網頁相關的設計，想了解一下要怎麼設計出美美的網頁。昨天因為新增部落格的一些個人資訊，就開始研究研究 RWD 響應式網頁。雖然我的部落格主題是基於 BootStrap 做出來，可以直接套用他的類別，但看完許多教學之後，覺得有一些用法應該還是要記錄一下，說不定以後需要用到時，才發現太久沒碰又忘記了。
簡單介紹
製作 RWD 響應式網頁時，一定會搭配 @media screen 屬性，當初在一些網頁模板的 CSS 檔案中，看到這個屬性還納悶好久呢，果然是菜鳥一隻XD。總之，如果要針對不同裝置做出不同效果，就需要 CSS 的 Media Queries，中文叫做「媒體查詢」，顧名思義就是判斷現在的媒體裝置是什麼，進而配置對應的 CSS 樣式。
當時看不懂的原因就在這裡，因為我一直以為 CSS 樣式表就只是設定網頁標籤的屬性而已，不會有判斷的功能，小弟才疏學淺，真是慚愧，小時候都沒好好讀書。
如果使用 Media Queries，那網頁就會先去「詢問 (query) 」目前的瀏覽「媒體 (media)」，只要符合設定條件就會套用 CSS 樣式；反之，不符合可能就是不套用或套用其他樣式。這樣的「邏輯」特性才得以讓網頁可以更彈性的去做變化。
Media Queries 的使用方法
分成三種，一種是寫在 HTML 裡面、另一種是直接寫在 CSS 裡面、最後一種是在 CSS 裡面呼叫。
寫在 HTML 裡面
- 直接詢問裝置
<link rel="stylesheet" media="screen" href="style.css" />
- 詢問裝置並附加條件
<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 700px)" href="style.css" />
寫在 CSS 裡面
- 直接詢問裝置
@media screen {
* { font-family: sans-serif; }
}
- 詢問裝置並附加條件
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
在 CSS 裡面使用 @import 的方式
利用 @import "style.css"; 並搭配 Media Queries 來匯入樣式表。
- 直接詢問裝置
@import "style.css" screen;
- 詢問裝置並附加條件
@import url(color.css) screen and (min-width: 400px);
其實三種方式都可以做到一樣的效果，感覺如果沒有要特別需求應該直接照第二種方式寫在 CSS 的樣式表裏就行了。
Media 的類型和特徵
Media Types
顧名思義就是讓網頁去詢問目前的裝置類型。
| Media 類型 | 說明 |
|---|---|
| all | 所有裝置 |
| 印刷裝置 | |
| screen | 螢幕裝置 |
| speech | 朗讀裝置 |
Media Features
有了裝置的類型之後，還可以更進一步去取得裝置的屬性特徵，這樣就可以做更多判斷。需要注意的就是要用小括號將 Feature 包覆起來，通常搭配 Media 邏輯關鍵字就可以做出 RWD 響應式網頁。
特徵大致可分頁面尺寸、顯示品質、顏色、互動。由於特徵眾多就不詳細介紹，可參閱 參考[3] 的文章。
用頁面尺寸的特徵來判斷瀏覽器寬度。
最常用的特徵應該是頁面尺寸的屬性了，分別是 width、height、aspect-ratio 跟 orientation，其中最常用的應該就是 width 跟 height，接下來就直接說明如何使用 width 簡單實現 RWD 響應式的功能。
Max-Width
若瀏覽區域的寬度小於 600 px，則下方的 CSS 描述就會立即被套用：
@media screen and (max-width: 600px){
.class{
background: #ccc;
}
}
Min-Width
若瀏覽區域的寬度大於 900 px，則下方的 CSS 描述就會立即被套用：
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
Min-Width and Max-Width
網頁寬度範圍在 321 px ~ 768 px，則下方 CSS 描述會立即被套用：
@media only screen and (min-width: 321px) and (max-width: 768px) {
.class {
background: #666;
}
}
Note：從剛剛幾個例子可以看到可以用
min-、max-來設定width特徵的範圍屬性。
CSS Media Queries 的使用方式
Queries 有四種使用方式，分別是 or、and、not 和 only。基本上 or、and 很好理解也最常使用，主要是 not、only 屬於是處理特殊情況才會使用。
AND
所有情況符合才會成立。
範例：網頁寬度需在 321 px 以上，在 768 px 以下才會成立。
@media only screen and (min-width: 321px) and (max-width: 768px) {
.class {
background: #666;
}
}
OR (可以用逗號，)
只要其中一項符合就會成立。
範例：當裝置直立或是寬度小於 200 px 時就會成立。
h1{
font-size:30px;
}
@media (orientation: portrait), (max-width:200px){
h1{
font-size:50px;
color:red;
}
}
取自 參考[3] 的文章。
NOT
在於排除一些裝置媒體，會寫在 media query 的字首。
ONLY
指定「只有」某種裝置媒體才能套用某些樣式，跟 NOT 一樣會寫在 media query 的字首。
Refer
[1] Mobile Web 前端技術筆記(二): Media Queries 與 CSS – 烏托比亞 (wordpress.com)
[2] Day22：小事之 Media Query – iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)