CSS Media Queries 介紹與基礎應用

「Responsive Web Design」這個觀念與技術已經發展一段時間了,但這一年幾乎荒廢了我的 Html/CSS 學習之路,所以對於 Responsive web design 的觀念仍是懵懵懂懂,但 Google 是萬能的,所以根據強大的 wikipedia 幫我們簡單的定義了何謂 Responsive Web Design

A site designed with RWD uses CSS3 media queries, an extension of the @media rule, to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images.
(網站使用 CSS3 media queries (使用方法為 @media +各種規則),調整我們設計的版面。讓版面更加彈性,可以在不同的設備上瀏覽網站。)

Responsive web design – Wikipedia, the free encyclopedia

也就是說,如果做出一個 Responsive web design (以下簡稱 RWD) 非常良好的網站,我們要先會運用 @media 這個新的 CSS3 的屬性。因此我花了一些時間,想先了解 @media 可以怎麼用? 會有怎樣的效果? 假使你跟我一樣,對 @media 懵懵懂懂還摸不著邊際,歡迎跟我一起學習;假使你已經是 RWD 大師,也歡迎幫我看看,我這樣的學習筆記認知,在觀念或是應用上有甚麼需要改進的地方 😀

Media Queries 介紹與基礎應用

Media 跟 Queries,我們可以先把它拆成兩塊來看:

基本呼叫 Media 的方法

@media 是 CSS 擴充元件的寫法之一,我們可以把它當成是 CSS 的類別,可能會比較好懂。 @media 呼叫方法有三種,範例如下:

1. HTML 在呼叫 CSS 的時候,將 media 的條件加入:

HTML

哈,是不是很有 IE Conditional Comments 的 FU。扯遠了,拉回~

2.直接寫在 css 檔案裡:

CSS

3.使用 @import:

CSS

Queries 基本使用方法

Query 顧名思義就是「查詢」的意思,我們如果要非常熟練的運用 media,各種條件跟條件之間的查詢是不可或缺的。

像是前面範例運用的 (min-width: 400px) and (max-width: 700px) ,那個「and」就是 Query 的一種。

Query 的語法只有三大項:not, and, only。我們最常用的是「and」,不難記,中文解釋也很簡單,比較困難的是,要怎麼加你心中設想的條件,用成語法呈現出來,所以要有一點邏輯概念會比較好上手。而這三種查詢條件可以獨立存在,也可以同時存在,只要用「,」隔開條件串即可。

1. and 使用方法:

  • 單一條件:
CSS
  • 同時符合兩種條件:
CSS

  • 兩種條件,符合一種即可
CSS

2. only 使用方法:

有的瀏覽器並不支援 Media Queries,但支援 Media Type,所以我們可以用only來阻擋這些瀏覽器。

HTML

以上這段語法的意思為:

  • 支援 Media Queries & Media Type 的瀏覽器:如果是彩色螢幕,就會讀取 test.css。
  • 不支援 Media Queries,但支援 Media Type 的瀏覽器:因為有寫 only 條件,所以不會往下讀「彩色螢幕」,所以不會呼叫 test.css
  • 不支援 Media Queries & Media Type 的瀏覽器:不管有沒有 only,都不會呼叫 test.css

3. not 使用方法:

not是用來排除某些設備的樣式,假設你希望這個樣式只在 A 設備有作用, B 設備完全沒用,就可以使用 not 囉。

舉例如下:

CSS

我們也可以換個寫法,用數學運算子的括號先決,應該會比較清楚:@media (not (screen and (color))), print and (color)

Media 支援 type 與 features (值)

Media Type

Media 常見的支援裝置有: all, screen, print ,以下列出所有支援的裝置類型(by @W3C):

  • all :所有可適用的裝置。
  • braille :盲人點字器。
  • embossed :盲人點字印表機。
  • handheld : 手機/ PDA裝置。
  • print :印表機列印輸出。
  • projection :全螢幕投影輸出。
  • screen :一般電腦螢幕 (含iphone, ipad)。
  • speech :朗讀式裝置。
  • tty :由文字長度決定大小的終端機裝置。
  • tv :電視。

Media Feature

  • width | min-width | max-width
    (寬度 | 最小寬度 | 最大寬度)
  • height | min-height | max-height
    (高度 | 最小高度 | 最大高度)
  • device-width | min-device-width | max-device-width
    (裝置寬度 | 裝置最小寬度 | 裝置最大寬度)
  • device-height | min-device-height | max-device-height
    (裝置高度 | 裝置最小高度 | 裝置最大高度)
  • orientation (value: portrait | landscape)
    (裝置旋轉方向 值:直立 | 橫向)
  • aspect-ratio | min-aspect-ratio | max-aspect-ratio
    (螢幕顯示比例 | 螢幕顯示最小比例 | 螢幕顯示最大比例)
  • device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
    (裝置顯示比例 | 裝置顯示最小比例 | 裝置顯示最大比例)
  • color | min-color | max-color
    (彩色 | 最小顏色bit數 | 最大顏色bit數)
    color:0 表示該裝置為黑白(單色)
  • color-index | min-color-index | max-color-index
  • monochrome | min-monochrome | max-monochrome
    (單色 | 最小單色bit數 | 最大單色bit數)
    monochrome :0 表示該裝置不是黑白(單色)
  • resolution | min-resolution | max-resolution
    (解析度 | 最小解析度 | 最大解析度)
  • scan (value:progressive | interlace)
    (TV 專用掃描)
  • grid

寫到這覺得篇幅好像過長,而且大家消化也需要一點時間,關於 Media Queries 更進階的運用,以及權重說明,等我更加瞭解後,再整理一份給大家參考吧!!

其實如同我開頭所言,RWD 的技術已經蠻成熟了,也許我這篇教學已經來的有點晚,網路上已經有很多相關應用與例子,不過還是希望經過我這樣的說明,大家可以更瞭解 Media Queries 的使用方法 😀

Media Queries 參考資料
1. [CSS] Media Query 小撇步 // HINA::工程幼稚園
2. Mobile Web 前端技術筆記(二): Media Queries 與 CSS // 烏托比亞
3. CSS3 Media Queries 詳解 // 池水間
4. CSS media queries // CSS | MDN
5. Media Queries // W3C

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
4 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
AMY
AMY
4 years ago

謝謝你的分享幫助很大

patty
patty
4 years ago

Media Feature 裡面的第二行高度,好像少了一個”h” ^_^

muki
4 years ago
Reply to  patty

哈哈感謝!!已經更新了

ajhsu
ajhsu
3 years ago

原本在讀 MDN 的文件 (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries),
但後來發現 MUKI 整理的版本更清楚更好懂,謝謝你的分享!

粉絲團