淺談 CSS 中的 Media Queries
隨著智慧型手機、平板等裝置越來越普及，傳統以電腦螢幕為主的網頁設計方式，漸漸無法滿足大家對於優質 UI/UX 的期待。想像一下，當你用手機打開某個網頁，結果畫面不是破版就是元件很難點擊，一定會氣到跳出網頁不用了吧？因此 RWD (Responsive Web Design) 響應式網站設計蔚為主流。
RWD 的重點，在於為不同螢幕尺寸的裝置，設計不同的版面。主流的做法是從行動裝置，也就是螢幕尺寸比較小的版面開始設計，因此也被稱為 Mobile First 的設計原則。而要做到 Mobile First 和 RWD，CSS 中的 Media Queries 絕對是不可或缺的要角！
本篇學習筆記會著重在 Media Queries 的基本用法。
什麼是 viewport？
根據 MDN 的定義，media queries 的解釋如下，讓我們能依照不同尺寸的 viewport (視窗) 建立不同的版面：
Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport...
這邊需要留意，中文時常也將 window 翻譯為視窗，但是兩者之間的概念其實不同。
- Window：window 指的是整個瀏覽器視窗，所以包含 URL 搜尋吧、你的書籤列、分頁等等。window 的尺寸會隨著使用者調整瀏覽器視窗大小而改變。
- Viewport：viewport 指的是當前瀏覽器顯示出來的網頁內容，會隨著 window 大小、裝置的螢幕尺寸而改變。
為了怕引發誤會，我們在這篇學習筆記都會以 viewport 或 window，避免使用視窗這個模稜兩可翻譯名詞。
此外，也建議在 HTML 的 <meta> 裡面加入以下 viewport 設定，告訴瀏覽器 viewport 要以什麼為基準：
name="viewport" content="width=device-width, initial-scale=1"
width=device-width 代表將內容寬度調整為裝置寬度，而 initial-scale=1 則定義在網頁載入時的縮放等級，讓 CSS 像素與裝置實體像素的比例為 1:1。
media queries 基本語法
RWD 通常關注寬度 (width)，而在使用 media queries 的時候，往往搭配 max-width 以及 min-width 這兩個屬性。
- max-width：若 viewport 小於或等於指定的最大寬度，就套用
media queries包覆的 CSS 設定。 - min-width：若 viewport 等於或大於指定的最小寬度，就套用
media queries包覆的 CSS 設定。
舉一個實際上的例子：
@media (max-width:600px) {
body {
background-color: red;
},
h1 {
font-weight: bold;
}
}
- 首先用關鍵字
@media表示接下來的程式碼套用 media queries。 - 半形括號內，帶入 media feature，像是
max-width: 600px。
大括號內帶入指定尺寸範圍內套用的 CSS，可以置入多個選擇器，一樣用半形逗號隔開即可。
用白話解釋程式碼：在 viewport 小於等於 600 px 之下，body 的背景顏色為紅色，而且 h1 元素的文字寬度為粗體。
media queries 讓我們可以在不同的 breakpoint 提供不同的 CSS 樣式，帶來更棒的使用體驗
圖片來源：Alpha Camp
media type
時常可以在 CSS 的第一組 media query 看到 @media screen，這是因為某些舊型的瀏覽器並未支援 media query，所以我們需要用這個關鍵字，告訴那些瀏覽器說：「嘿，如果你後面看到其他 media query，請直接忽略掉它們，以這個有標記 screen 的 CSS 為主！」。
除了 screen 之外，CSS 還有提供 print 作為影印模式的關鍵字，但最常見的還是 screen，而且時常跟著關鍵字 and 一起出現，後面接上尺寸。更多資訊可以參考 @media - MDN。
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
media feature
width 、 height 只是 media feature 的其中兩部分，另一些比較常用的功能包含 orientation。
- orientation: portrait - viewport 的高度大於或等於寬度。
- orientation：landscape - viewport 的寬度大於或等於高度。
@media only screen and (orientation: portrait) {
h1::before {
content: "PORTRAIT BABY!!!";
}
}
上面的程式碼，代表當 viewport 的高度大於或等於寬度時，h1 元素前面將插入 PORTRAIT BABY!!! 字樣。
orientation 針對行動裝置橫擺或直擺的版面情境下，應該會有其用武之地。其他 media feature 族繁不及備載，可以參考 MDN 文件。
優先順序問題
和其他 CSS 一樣，media query 遵循由上而下的順序，也就是說，當某個選擇器同時符合兩組 media query 的設定，後面那一組會贏得勝利。以下面的程式碼為例，若 viewport 寬度大於 1200px，雖然第一組 media query 也符合，但最終 body 背景顏色會呈現黃色。
- 瀏覽器檢查當前 viewport 超過 800 px，符合第一組
media query，所以 body 背景顏色套用橘色。 - 往下執行 CSS，發現有第二組
media query符合，body背景顏色因此被更新為黃色。 - 底下沒有其他 CSS 了，最終成果產生~
@media only screen and (min-width: 800px) {
body {
background-color: orange;
}
}
@media only screen and (min-width: 1200px) {
body {
background-color: yellow; /* This one wins! */
}
}
假設我們改變兩者的順序，body 背景顏色會改為橘色。：
@media only screen and (min-width: 1200px) {
body {
background-color: yellow;
}
}
@media only screen and (min-width: 800px) {
body {
background-color: orange; /* This one wins! */
}
}
✍️ 為了避免誤會和閱讀直覺性，最好還是依循尺寸大小進行排序。
如何在瀏覽器測試不同尺寸的設定
寫好 media queries 之後，我們當然會想測試看看結果如何，最直覺的方法是自由擴展、壓縮瀏覽器視窗來調整 viewport。這樣不是不行，但是非常麻煩，而且看起來有點蠢，所以我們應該多多善用瀏覽器提供的測試工作。
這邊以 Chrome 的 DevTool 為例，打開之後點選裝置的 icon，左手邊的視窗便會進入 RWD 設定模式，於上方調整寬度和長度的數字即可測試 RWD 效果如何，非常方便 ❤️
前面我們提過 orientation: landscape 或是 orientation: portrait，想要測試這一塊，也可以點擊上方調整欄當中，最右邊的裝置搖晃 icon，切換橫擺或直擺。
Mobile First 設計原則
現代生活中，行動裝置已經成為主流了，因此我們在進行前端開發時，務必要把行動裝置使用者放在設計核心。Mobile First 的設計原則應運而生。它講求的重點如下：
如何隨著裝置螢幕放大，而增加應用程式的內容
要注意，Mobile First 不是要我們想方設法把所有內容都塞進行動裝置的排版裡面，設度的斷捨離，才能創造更優質的使用體驗。畢竟雖然是同一個應用程式，但桌機使用和行動裝置使用，很可能情境與需求都會變化。
除此之外，由於行動裝置的效能往往比不上電腦，因此把行動版的程式碼放到前面，也不失為一種好做法，這部分還需要在後續的實作中體會。
參考資料
- Beginner's guide to media queries @MDN
- @media @MDN
- Media Query CSS Example – Max and Min Screen Width for Mobile Responsive Design @freecodecamp
- 什麼是行動優先設計 (Mobile First Design)？- 響應式網頁設計(RWD) 並不是 Mobile First Design！@Rae Yu
- Viewport meta tag @MDN
你可能也想看
