iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
4

Media Queries 中文翻為『媒體查詢』,作用在偵測輸出裝置,它是由一個媒體類型(media type)與零到多個用於檢查特定條件的媒體功能(media features)組合而成。

在 W3C 文件中有列出支援的裝置,媒體類型的HTML4的完整列表是:

  • all - 所有的裝置
  • aural - 聽覺裝置
  • braille - 盲文點字機
  • handheld - 手持裝置
  • print -印表機輸出設備
  • projection - 投影輸出設備
  • screen - 電腦螢幕
  • tty - 聽障人士使用的 Teletype 機器
  • tv - 電視

CSS2定義了相同的列表,不過拿掉了 aural 並增加了

  • embossed - 盲文印表機
  • speech - 朗讀裝置

而在網頁上常用的為 allscreenprint

使用 Media 的方式

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

直接寫在 css 檔案內

@media screen {
  * { font-family: sans-serif; }
}

在 css 內使用 @import 的方式

/* 在螢幕寬度 400px 以上,就會匯入 color.css */
@import url(color.css) screen and (min-width: 400px);

Queries 的使用方式

Query 的使用方式有三種:and not only

and

  • 單一條件
/*如果螢幕寬度為 768px 以下,就套用 css 設定*/
@media screen and (max-width:768px) { 
  ...
}
  • 兩個條件同時符合
/*如果螢幕寬度為 400px 以上 且 700px 以下,就套用 css 設定*/
@media screen and (min-width: 400px) and (max-width: 700px){ 
  ...
}
  • 兩個條件其中一個符合
/*如果是彩色螢幕 或 彩色投影機設備,就套用 css 設定 */
@media screen and (color), projection and (color) { 
  ...
}

not

not 是用來排除所選擇的特定媒體

/*如果是彩色螢幕不套用 css 設定,印表機才套用*/
@media not screen and (color), print and (color) { 
  ...
}

only

only 是用來定特殊的媒體類型

<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />

上面是最基本的介紹,更多的 Media Queries 相關使用可以參考 W3C,下面要來說說 min-width 與 max-width

min-width 與 max-width

剛開始在學 media query 的時候常常搞不清楚 min-width 與 max-width 要怎麼用,主要是不了解他所涵蓋的範圍與怎麼涵蓋。

  • max-width,表示這個數字以下(包含) 的都適用。(<=)
  • min-width,表示這個數字以上(包含) 的都適用。(>=)

上面這兩句很重要、上面這兩句很重要、上面這兩句很重要,所以講三次XDDD
搞不清楚以上、以下,寫條件範圍就容易出錯。

至於條件範圍需要寫到多細,取決於客戶的需求,所以合約上也需要註明製作出來的網頁需要有幾各媒體查詢,例如:for 桌機、 for 桌機與手機、for 桌機、手機、平板等。

最早在寫 RWD 網頁時,我只用 max-width 來寫,css 會長成下面這樣

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

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

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

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

那時候的寫法是以桌機為主,然後再慢慢往其他更小的裝置尺寸做調整。

後來開始有人推廣 mobile first,media query 會變成這樣寫:

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

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

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

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

用這兩種寫法其實網頁也沒出過任何問題,只是 媒體查詢範圍重複 而已。
以下這種是 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) { ... }

其實只要了解 media query 的條件範圍使用方式,用哪一種寫法都是很OK的。
最怕是不了解條件範圍的使用,寫到最後還要打掉重寫。
以上是今天的 Media Queries 介紹,各位看倌明天見囉~

參考資料:
[1] Media Queries - w3.org
[2] Using media queries - MDN
[2] Media Query 小撇步


上一篇
Day21:小事之 CSS Reset 與 CSS normalize
下一篇
Day23:小事之 CSS hacks
系列文
前端路上那些重要與不重要的小事30

1 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2018-01-10 19:08:34

/images/emoticon/emoticon12.gif

/images/emoticon/emoticon25.gif謝謝 sunallen

我要留言

立即登入留言