用CSS3的Media Queries進行自適應網頁設計(Responsive Web Design)


作者: | 2011/04/06 06:00:22 | 2 則迴響


from webdesignerwall.com

所謂的自適應網頁設計主要是透過CSS設定,讓網頁版面的寬度,依照設計者的設定,以百分比的形式來呈現,所以頁面寬度的顯示是根據使用者的瀏覽設備解析度作輸出,因此可避免瀏覽器的橫向捲軸出現。(又稱為Adaptive Design)

液態排版 vs 固定寬度排版
液態排版的對比設計方式就叫「固定寬度(fixed-width)排版」,傳統上來說,比起液態方式,固定方式通常較受平面及視覺設計師歡迎,因為他們較習慣先決定整體版面輸出的範圍,而液態方式則需要費多一點心力去考量很多不同解析度的情況,雖然比較費工,但卻是互動介面不可或缺的重要設計。

應用Media Queries技巧
本篇要介紹的技巧,算是利用CSS3來簡化及強化Liquid Layout的設計活動,因為是針對解析度進行的排版設計,國外也有稱之為dynamic resolution dependent layout,不過更多是乾脆以達成此效果的功能名稱–CSS3 media queries來介紹這種技巧。

可以先欣賞一下使用Media Queries製作responsive design的網站:
Hicks Design
Colly.com
A List Apart

追加! 這裡還有非常棒的Media Queries應用的Gallery!

註:開啟上述網站後,試著調整一下瀏覽器的寬度,然後注意觀察上面元素的變化。

CSS3 Media Queries語法介紹

Max Width
若瀏覽區域的寬度小於600像素,則下方的CSS描述就會立即被套用:
[css]
@media screen and (max-width: 600px)
{
.class
{
background: #ccc;
}
}
[/css]

也可以把要套用的描述獨立成外部檔案:
[css]

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

[/css]

Min Width
若瀏覽區域的寬度大於900像素,則下方的CSS描述就會立即被套用:
[css]
@media screen and (min-width: 900px)
{
.class
{
background: #666;
}
}
[/css]

Device Width
若瀏覽設備的可視範圍最大為480px,則下方的CSS描述就會立即被套用:(註:智慧型手機目前常見最大寬度為 480px,如iPhone or Android Phone)
[css]
@media screen and (max-device-width: 480px)
{
.class
{
background: #000;
}
}
[/css]

針對iPhone4提供專用的css設定檔:
[css]
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
[/css]

針對iPad的Portrait Mode(直立)與Landscape Mode(橫躺)兩種瀏覽模式給予不同的css設定檔:
[css]
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
[/css]

IE8之前的版本不支援怎麼辦?
有三種辦法,請參考:
http://css-tricks.com/resolution-specific-stylesheets/
http://www.themaninblue.com/experiment/ResolutionLayout/
http://plugins.jquery.com/project/MediaQueries

本站的DEMO
這個是本站做的小DEMO(HTML5&CSS3 based),供您參考,不過只有”先進一點”的瀏覽器可看 (可憐的IE8以下版本請看特別加料版XD)。

參考資料webdesignerwall.com


標籤:, , , , ,

分類:,

本文作者是Audi Lu

2 則留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

*

*

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料