Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

「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 的條件加入:

<!-- 這段話表示 當螢幕寬度在 400px ~ 700px 之間,我們就會使用 test.css 這個檔案 -->
<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 700px)" href="test.css">

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

2.直接寫在 css 檔案裡:

/* 直接將 media 的條件寫在 CSS 裡,裡面包的是各種 class / ID 的 css 設定 */
@media screen and (min-width: 400px) and (max-width: 700px) {
  a {
     color: red;}
  .entry {
     margin-top: 10px;
     font-size: 20px;}
}

3.使用 @import:

/* 在 CSS 裡使用 @import。
以下解釋為當螢幕寬度在 400px ~700px 之間,就會將 test.css 的檔案呼叫匯入,並套用設定。 */
@import "test.css" screen and (min-width: 400px) and (max-width: 700px)

Queries 基本使用方法

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

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

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

1. and 使用方法:

  • 單一條件:
/* 如果螢幕寬度為 500px (含) 以上,就套用這些 css 設定 */
@media screen and (min-width:500px) { 
  css 設定寫在此
}

/* 如果螢幕視窗為直立,就套用這些css設定
螢幕視窗橫向說法: orientation:landscape */
@media screen and  (orientation: portrait) {
  css 設定寫在此
}
  • 同時符合兩種條件:
/* 螢幕寬度在 400px ~ 700px 之間,就套用這些 css 設定 */
@media screen and (min-width: 400px) and (max-width: 700px) {
  css 設定寫在此
}

  • 兩種條件,符合一種即可
/* 如果是彩色螢幕,或彩色投影機,就套用這些 css 設定 */
@media screen and (color), projection and (color) {
  css 設定寫在此
}

2. only 使用方法:

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

<link rel="stylesheet" type="text/css" href="test.css" media="only screen and (color)">

以上這段語法的意思為:

  • 支援 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 設定,彩色印表機會套用 css 設定*/
@media not screen and (color), print and (color) {
  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

歡迎給我點鼓勵,讓我知道你來過 :)

1
1
Subscribe
Notify of
guest

5 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
AMY
AMY
8 years ago

謝謝你的分享幫助很大

patty
patty
8 years ago

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

muki
8 years ago
Reply to  patty

哈哈感謝!!已經更新了

ajhsu
ajhsu
6 years ago

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

tom佑
tom佑
1 year ago

因為有muki老師你們的攻略才能讓更多初學者玩起來更簡單
有很多部分w3c應該是說的很清楚但是用翻譯看感覺翻起來有點不合邏輯