[CSS] Media Query 小撇步

這是個行動裝置當道的時代，所以 @media 隨之興起！不過有時候在寫，總是會遇到一些感覺很莫名其妙的事情。

所以，這是寫給我自己的筆記這樣（揍飛

TL; DR

W3C: Media Queries

Media Queries

簡單的說，就是針對你的裝置，給你不同的樣式設定。支援的裝置很多，常用的大概就是 all, screen 與 print 這三種吧。

all
braille
handheld
print
projection
screen
tty
tv
embossed
speech
aural，這個在 CSS3 已經棄用了，改增加了 speech 與 embossed

使用的方法就三種

media attribute
@import
@import url(style.css) screen;
@media
@media all and (max-width: 980px) { ... }

第三種最近比較熱門，使用的方式是 @-rule 的作法，也就是說，後面除了加上裝置類型之外，還可以額外增加一些條件。可以使用的條件還頗多的，

width, height, with max/min prefix
device-width, device-height with max/min prefix
orientation
aspect-ratio, device-aspect-ratio with max/min prefix
color with max/min prefix
color-index with max/min prefix
monochrome with max/min prefix
resolution with max/min prefix
scan applies tv media types only
grid

逐一解釋

定義寬度與高度，可定義範圍
定義__裝置__的高度與寬度，可定義範圍
裝置旋轉方向
螢幕與裝置顯示比例，可定義範圍
顏色的 bit 數，如果不是彩色裝置則會是 0
索引色專用，就是在色彩對應表（Color lookup table）中的顏色數
單色（灰階）裝置專用，不是單色（灰階）裝置就會返回 0
定義解析度，可定義範圍
tv 專用設定，掃描的種類
這跟 Media Group 有關

W3C: Media Group

HowTo

我這裡借一下 bootstrap 的 responsive 設定來說明一下，

@media (max-width: 767px) {
}
@media (max-width: 480px) {
}
@media (min-width: 768px) and (max-width: 979px) {
}
@media (min-width: 980px) {
}
@media (min-width: 1200px) {
}

首先要說明一下 max- 與 min- 之間的小事情，

max-，表示這個數字以下（包含）的都適用。
min-，表示這個數字以上（包含）的都適用。

那到底為什麼 767px 要放在 480px 上面，而 1200px 卻又放在 980px 底下呢？會這樣放應該都有個原因，只是好像都找不到這樣放置的說明。

Responsive Media Query Quick Reference

圖片來源：Responsive Media Query Quick Reference

大抵上我可以這樣來解釋，

當裝置尺寸小於或是等於 767px 的時候，這裡的樣式可以覆寫之前所設定的樣式。
當裝置尺寸小於或是等於 480px 的時候，作用同上。至於為什麼這個比較小的尺寸要放這裡，我們稍候會做解釋。
介於 768px 與 970px 之間的尺寸，由此覆寫
大於或是等於 980px 的尺寸，由此覆寫
大於或是等於 1200px 的尺寸，作用同 1 & 2

為什麼 480px 要放在 767px 之後呢？我們來作一個假設，

#container {
    width: 1200px;
}

@media (max-width: 480px) {
    #container {
        width: 100%;
    }
}

@media (max-width: 767px) {
    #container {
        width: 720px;
    }
}

以上的設定，在寬度各為 480px, 640px, 768px 的解析度下，#container 顯示的結果，

480px, #container 顯示為__720px__
640px, #container 顯示為__720px__
768px, #container 顯示為__1200px__

如果把 480px 與 767px 設定對調，則顯示結果為，

480px, #container 顯示為__100%__
640px, #container 顯示為__720px__
768px, #container 顯示為__1200px__

這樣看出端倪了嗎？由於 max- 是採用__小於或等於__該數值的時候生效，所以，當你的 @media 設定在 480px 時，尺寸無論在 480px 或是 640px 他都會符合條件，而在 767px 的時候，這個狀況也會發生。

所以，把 480px 寫於 767px 之後，除了避免條件重複符合外，另外一個優點便是可以相對的修改較少的樣式設定，來達成符合 480px 解析度所需要的樣式要求。那為什麼不用 min- 來寫呢？

用 min- 來寫，每次更換 @media query，則樣式就需要重新設定。

至於最後那兩個 min- 的設定，又為什麼要使用 min- 的設定？為的就是不要讓他去__覆蓋__之前的設定樣式，所以才會採用 min- 來去覆寫一些必須要依照尺寸而修改的地方。

倘若我們使用 max- 會發生什麼事情？

@media (min-width: 768px) and (max-width: 979px) {
    #container {
        width: 940px;
    }
}
@media (max-width: 1200px) {
    #container {
        width: 1170px;
    }
}

那麼，你的 #container 永遠都會得到 width: 1170px 這樣的設定。無論你之前設定了些什麼。當然，這些只是基本盤，如果你需要一些更複雜的設定，重複使用 @media 也是可以的，特別是樣式被覆寫過，想要再次修改的時候。

小結

我只能說這樣的 @media 設定，應該是先人的智慧吧（喂

TL; DR

Media Queries

HowTo

小結

You might also like...