 from 所謂的自適應(yīng)網(wǎng)頁設(shè)計(jì)主要是透過CSS設(shè)定，讓網(wǎng)頁版面的寬度，依照設(shè)計(jì)者的設(shè)定，以百分比的形式來呈現(xiàn)，所以頁面寬度的顯示是根據(jù)使用者的瀏覽設(shè)備解析度作輸出，因此可避免瀏覽器的橫向捲軸出現(xiàn)。(又稱為Adaptive Design) 液態(tài)排版 vs 固定寬度排版
液態(tài)排版的對(duì)比設(shè)計(jì)方式就叫「固定寬度(fixed-width)排版」，傳統(tǒng)上來說，比起液態(tài)方式，固定方式通常較受平面及視覺設(shè)計(jì)師歡迎，因?yàn)樗麄冚^習(xí)慣先決定整體版面輸出的範(fàn)圍，而液態(tài)方式則需要費(fèi)多一點(diǎn)心力去考量很多不同解析度的情況，雖然比較費(fèi)工，但卻是互動(dòng)介面不可或缺的重要設(shè)計(jì)。 應(yīng)用Media Queries技巧
本篇要介紹的技巧，算是利用CSS3來簡(jiǎn)化及強(qiáng)化Liquid Layout的設(shè)計(jì)活動(dòng)，因?yàn)槭轻槍?duì)解析度進(jìn)行的排版設(shè)計(jì)，國外也有稱之為dynamic resolution dependent layout，不過更多是乾脆以達(dá)成此效果的功能名稱–CSS3 media queries來介紹這種技巧。 可以先欣賞一下使用Media Queries製作responsive design的網(wǎng)站：
Hicks Design
Colly.com
A List Apart 追加! 這裡還有非常棒的Media Queries應(yīng)用的Gallery! 註：開啟上述網(wǎng)站後，試著調(diào)整一下瀏覽器的寬度，然後注意觀察上面元素的變化。 CSS3 Media Queries語法介紹 Max Width
若瀏覽區(qū)域的寬度小於600像素，則下方的CSS描述就會(huì)立即被套用： 1 2 3 4 5 6 7 | @media screen and (max-width: 600px)
{
.class
{
background: #ccc;
}
}
|
也可以把要套用的描述獨(dú)立成外部檔案： 1 | <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
|
Min Width
若瀏覽區(qū)域的寬度大於900像素，則下方的CSS描述就會(huì)立即被套用： 1 2 3 4 5 6 7 | @media screen and (min-width: 900px)
{
.class
{
background: #666;
}
}
|
Device Width
若瀏覽設(shè)備的可視範(fàn)圍最大為480px，則下方的CSS描述就會(huì)立即被套用：(註：智慧型手機(jī)目前常見最大寬度為 480px，如iPhone or Android Phone) 1 2 3 4 5 6 7 | @media screen and (max-device-width: 480px)
{
.class
{
background: #000;
}
}
|
針對(duì)iPhone4提供專用的css設(shè)定檔： 1 | <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
|
針對(duì)iPad的Portrait Mode(直立)與Landscape Mode(橫躺)兩種瀏覽模式給予不同的css設(shè)定檔： 1 2 | <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
|
IE8之前的版本不支援怎麼辦？
有三種辦法，請(qǐng)參考：
http:///resolution-specific-stylesheets/
http://www./experiment/ResolutionLayout/
http://plugins./project/MediaQueries 本站的DEMO
這個(gè)是本站做的小DEMO(HTML5&CSS3 based)，供您參考，不過只有"先進(jìn)一點(diǎn)"的瀏覽器可看 (可憐的IE8以下版本請(qǐng)看特別加料版XD)。 參考資料：
相關(guān)文章:
|
