【行動網頁規劃】Responsitive Design 實戰設計(III) Media Queries

Hi! 各位朋友好,我是小蔡老師,在今天的單元主要探討的是網頁瀏覽可動性的觀念,在我們一般的排版情況下會如第一個單元為一靜態或動態網頁的排版,如果我們要更延伸應用於不同的裝置平台,目前有兩種做法,第一種為指向性網站 第二種為感應式做法,目前我們所探討的主題為感應式做法,所以在製作之前我們需先了解一下所謂的CSS Media Queries的系統觀念

Media Queries觀念所有的一開始


網站名稱: Responsive Design with CSS3 Media Queries
網站支援:各類瀏覽器皆可
網站系統: Windows, Mac, Linux
官方網站:官方站點

Media Queries範例總覽

圖示:
001


網站名稱: Media Queries
網站支援:各類瀏覽器皆可
網站系統: Windows, Mac, Linux
官方網站:官方站點

用法說明:

HTML

1
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 760px)" href="mediaquery.css" />

圖示:
002

CSS

1
2
3
@media screen and (min-width: 480px) and (max-width: 760px) {
/*.......設定書寫.......*/
}

說明:視窗寬度大於480px但小於760px時,套用mediaquery.css這個CSS檔。
圖示:
003

Media Queries 其實說簡單也很簡單,你可以只使用下面的幾行 CSS,再針對不同裝置去設 CSS 屬性就好了。

query條件的用法

@media [media type] and [(media feature)]
A.單一條件
例1:如果視窗最小寬度為480px

1
@media screen and (min-width:480px){/*.......設定書寫.......*/}

例2:如果視窗為直立,就套用這些CSS

1
@media screen and  (orientation: portrait){/*.......設定書寫.......*/}

B.兩者需同時符合
例1:如果視窗在480px和760px之間

1
@media screen and (min-width: 480px) and (max-width: 760px){/*.......設定書寫.......*/}

兩者符合一種即可

例2:如果是彩色螢幕或彩色投影機兩者之一

1
@media screen and (color), projection and (color) {/*.......設定書寫.......*/}

media type屬性和值

屬性:
all | aural | braille | handheld | print | projection | screen | tty | tv | embossed

值:
media features
* (max-或min-)width:[數字]
* (max-或min-)height:[數字]
* (max-或min-)device-width:[數字]
* (max-或min-)device-height:[數字]
* orientation:portrait 或 landscape
* aspect-ratio:[比值]
* (max-或min-)device-aspect-ratio:[比值]
* color
* color-index
* monochrome
* (max-或min-)resolution:[數字]dpi
* scan(只對tv)
* grid
參考資料:http://www.w3.org/TR/css3-mediaqueries/

針對某裝置下去做設定參考

Media Query Snippets 這個網站蒐集了很多行動裝置的 @media 條件式,你可以直接複製來使用。如下圖,有一堆的裝置你可以拿去設定
圖示:
004


網站名稱: Media Query Snippets
網站支援:各類瀏覽器皆可
網站系統: Windows, Mac, Linux
官方網站:官方站點

補充說明:
1.目前在網路上有人製作了讓不支援 Media Queries 的瀏覽器透過 Javascript 的方式也能支援。而目前這個似乎還是有點小問題,實際能不能使用請直接至該網站查詢:https://code.google.com/p/css3-mediaqueries-js/

2.目前網路上也有支援 Media Queries 的 Framework。Bootstrap 已經幫你把很多版面在不同裝置的顯示效果設定好,可以試試看使用這個不錯又簡單的 Framework,Bootstrap 。但不代表media queries沒有需要了解,因為 Bootstrap 只針對格局、圖片做變動,而細節的部份,你還是得使用 media queries,才能把 Responsive Web Design 調整完畢。

(BLOG 線上教學皆為雅朵美術工房所有&BLOG作品皆為設計者阿哲類所有 未經同意請勿盜連或者轉帖,違反者依法處理)

我想發問