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

2018070810:08

出處：http://www.mrmu.com.tw/2011/04/06/css3-media-queries-liquid-layout/

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描述就會立即被套用：
?

1
2
3
4
5
6
7 @media screen and (max-width: 600px)
{
.class
{
background: #ccc;
}
}

也可以把要套用的描述獨立成外部檔案：
?

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

Min Width
若瀏覽區域的寬度大於900像素，則下方的CSS描述就會立即被套用：
?

1
2
3
4
5
6
7 @media screen and (min-width: 900px)
{
.class
{
background: #666;
}
}

Device Width
若瀏覽設備的可視範圍最大為480px，則下方的CSS描述就會立即被套用：(註：智慧型手機目前常見最大寬度為 480px，如iPhone or Android Phone)
?

1
2
3
4
5
6
7 @media screen and (max-device-width: 480px)
{
.class
{
background: #000;
}
}

針對iPhone4提供專用的css設定檔：
?

1	`<link rel="stylesheet"` `media="only screen and (-webkit-min-device-pixel-ratio: 2)"` `type="text/css"` `href="iphone4.css"` `/>`

針對iPad的Portrait Mode(直立)與Landscape Mode(橫躺)兩種瀏覽模式給予不同的css設定檔：
?

1 2	`<link rel="stylesheet"` `media="all and (orientation:portrait)"` `href="portrait.css">` `<link rel="stylesheet"` `media="all and (orientation:landscape)"` `href="landscape.css">`