---
tags: CSS
---

# CSS｜Media Query｜媒體查詢｜裝置分辨率

**撰寫 Media Query 時需注意順序，後方程式碼會取代前方程式碼進行套用。**

範例：

> @media (max-width:500px)

> 照理說應該頻度寬度小於 500px 時，字體顏色需改變為藍色，
> 但瀏覽器卻顯示紅色，原因是 body 所執行的 css 順序為 @media query 之後，
> 所以會套用後方的程式碼效果。


若將 body 所執行得 css 至於 @media query 前，就可以順利執行 @media query 的效果。

---

**orientation** :

landscape 縱向顯示(直式螢幕)
@media all and (orientation:landscape) { …

portrait 橫向顯示(橫式螢幕)
@media all and (orientation:portrait) { … }


---

**min-width 與 max-width**
* max-width，表示這個數字以下（包含） 的都適用。(<=)
* min-width，表示這個數字以上（包含） 的都適用。(>=)

至於條件範圍需要寫到多細，取決於客戶的需求（實際製作需求）。
&nbsp;
**Bootstrap 的其中一種 media query 寫法**

@media (max-width: 575.99px) { ... }

@media (min-width: 576px) and (max-width: 767.99px) { ... }

@media (min-width: 768px) and (max-width: 991.99px) { ... }

@media (min-width: 992px) and (max-width: 1199.99px) { ... }

@media (min-width: 1200px) { ... }

---
**桌機為主｜Bootstrap**

// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

**行動裝置主｜Bootstrap**

@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

---
**@Media Query 要不要加 screen ?
先講結論：建議加上 screen ！**

**@media (max-width:632px)**
> This one is saying for a window with a max-width of 632px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.

**@media screen and (max-width:632px)**

> This one is saying for a device with a screen and a window with max-width of 632px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other available media types the most common other one being print.


上述為省略示意圖，正確寫法如下：

@media screen and (min-width: 320px) and (max-width: 768px) {

    /* 你的 CSS 樣式 */

}

---

Note: 再次提醒
max-width，表示這個數字以下（包含） 的都適用。(<=)
min-width，表示這個數字以上（包含） 的都適用。(>=)

參考資料：[小事之 Media Query](https://ithelp.ithome.com.tw/articles/10196578)

---
Note:
inline style 不能使用 `@media`

參考資料：[Is it possible to put CSS @media rules inline?](https://stackoverflow.com/questions/9808233/is-it-possible-to-put-css-media-rules-inline)

---
&nbsp;
參考資料：
* [Day22：小事之 Media Query](https://ithelp.ithome.com.tw/articles/10196578)
* [Boostrap v5.0｜Breakpoints](https://getbootstrap.com/docs/5.0/layout/breakpoints/)
* [What is the difference between "screen" and "only screen" in media queries?](https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries)
* [A Complete Guide to CSS Media Queries](https://css-tricks.com/a-complete-guide-to-css-media-queries/)
* [CSS @media Rule｜w3school](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)

---
###### tags: `CSS` `Media Query` `媒體查詢` `分辨率`