未分類
2012.11.22
「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.
Responsive web design – Wikipedia, the free encyclopedia
(網站使用 CSS3 media queries (使用方法為 @media +各種規則),調整我們設計的版面。讓版面更加彈性,可以在不同的設備上瀏覽網站。)
也就是說,如果做出一個 Responsive web design (以下簡稱 RWD) 非常良好的網站,我們要先會運用 @media
這個新的 CSS3 的屬性。因此我花了一些時間,想先了解 @media
可以怎麼用? 會有怎樣的效果? 假使你跟我一樣,對 @media
懵懵懂懂還摸不著邊際,歡迎跟我一起學習;假使你已經是 RWD 大師,也歡迎幫我看看,我這樣的學習筆記認知,在觀念或是應用上有甚麼需要改進的地方 😀
Media 跟 Queries,我們可以先把它拆成兩塊來看:
@media 是 CSS 擴充元件的寫法之一,我們可以把它當成是 CSS 的類別,可能會比較好懂。 @media 呼叫方法有三種,範例如下:
1. HTML 在呼叫 CSS 的時候,將 media 的條件加入:
哈,是不是很有 IE Conditional Comments 的 FU。扯遠了,拉回~
2.直接寫在 css 檔案裡:
3.使用 @import:
Query 顧名思義就是「查詢」的意思,我們如果要非常熟練的運用 media,各種條件跟條件之間的查詢是不可或缺的。
像是前面範例運用的 (min-width: 400px) and (max-width: 700px)
,那個「and」就是 Query 的一種。
Query 的語法只有三大項:not
, and
, only
。我們最常用的是「and
」,不難記,中文解釋也很簡單,比較困難的是,要怎麼加你心中設想的條件,用成語法呈現出來,所以要有一點邏輯概念會比較好上手。而這三種查詢條件可以獨立存在,也可以同時存在,只要用「,
」隔開條件串即可。
1. and
使用方法:
2. only
使用方法:
有的瀏覽器並不支援 Media Queries,但支援 Media Type,所以我們可以用only
來阻擋這些瀏覽器。
以上這段語法的意思為:
3. not
使用方法:
not
是用來排除某些設備的樣式,假設你希望這個樣式只在 A 設備有作用, B 設備完全沒用,就可以使用 not 囉。
舉例如下:
我們也可以換個寫法,用數學運算子的括號先決,應該會比較清楚:@media (not (screen and (color))), print and (color)
Media 常見的支援裝置有: all, screen, print ,以下列出所有支援的裝置類型(by @W3C):
寫到這覺得篇幅好像過長,而且大家消化也需要一點時間,關於 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
謝謝你的分享幫助很大
Media Feature 裡面的第二行高度,好像少了一個”h” ^_^
哈哈感謝!!已經更新了
原本在讀 MDN 的文件 (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries),
但後來發現 MUKI 整理的版本更清楚更好懂,謝謝你的分享!