[CSS] Media Query 小撇步

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

所以,這是寫給我自己的筆記這樣(揍飛

TL; DR

W3C: Media Queries

Media Queries

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

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

使用的方法就三種

  • 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


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

  1. 當裝置尺寸小於或是等於 767px 的時候,這裡的樣式可以覆寫之前所設定的樣式。
  2. 當裝置尺寸小於或是等於 480px 的時候,作用同上。至於為什麼這個比較小的尺寸要放這裡,我們稍候會做解釋。
  3. 介於 768px 與 970px 之間的尺寸,由此覆寫
  4. 大於或是等於 980px 的尺寸,由此覆寫
  5. 大於或是等於 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__

如果把 480px767px 設定對調,則顯示結果為,

  • 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 設定,應該是先人的智慧吧(喂

Hina Chen
偏執與強迫症的患者,算不上是無可救藥,只是我已經遇上我的良醫了。
Taipei