整理如何實現響應式佈局

11699847034_6b43d779b8_z

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念,簡而言之,就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。今天Designrock分享了一篇整理得很詳細的響應式設計文章給大家,希望是有幫助的喔!

文章來源:http://www.w3cfuns.com/blog-5421655-5400685.html

響應式佈局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗,而且隨著目前大屏幕移動設備的普及,用大勢所趨來形容也不為過。隨著越來越多的設計師採用這個技術,我們不僅看到很多的創新,還看到了一些成形的模式。

 

響應式佈局有哪些優點和缺點?

優點:

面對不同分辨率設備靈活性強

能夠快捷解決多設備顯示適應問題

缺點:

兼容各種設備工作量大,效率低下

代碼累贅,會出現隱藏無用的元素,加載時間加長

其實這是一種折衷性質的設計解決方案,多方面因素影響而達不到最佳效果

一定程度上改變了網站原有的佈局結構,會出現用戶混淆的情況

 

響應式佈局該怎麼設計?

我們在上面了解了什麼是響應式佈局,那在我們的實際項目中應該怎麼去設計呢?在以往我們設計網站的時候都會受到不同瀏覽器的兼容性的困擾,現在還要來個不同尺寸設備,我們該怎麼淡定下來呢?有需求就會有解決方案,呵呵,說到響應式佈局,就不得不提起CSS3中的Media Query(媒介查詢),這可是個好東西,易用、強大、快捷……Media Query是製作響應式佈局的一個利器,使用這個工具,我們可以非常方便快捷的製造出各種豐富的實用性強的界面。接下來就一起來深入的了解Media Query。

 

CSS中的Media Query(媒介查詢)是什麼?

通過不同的媒體類型和條件定義樣式表規則。媒體查詢讓CSS可以更精確作用於不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用於表達”大於或等於”和”小與或等於”。如:width會有min-width和max-width媒體查詢可以被用在CSS中的@media和@import規則上,也可以被用在HTML和XML中。通過這個標籤屬性,我們可以很方便的在不同的設備下實現豐富的界面,特別是移動設備,將會運用更加的廣泛。

 

media query能夠獲取哪些值?

設備的寬和高device-width,device-heigth顯示屏幕/觸覺設備。

渲染窗口的寬和高width,heigth顯示屏幕/觸覺設備。

設備的手持方向,橫向還是豎向orientation(portrait|lanscape)和打印機等。

畫面比例aspect-ratio點陣打印機等。

設備比例device-aspect-ratio-點陣打印機等。

對象顏色或顏色列表color,color-index顯示屏幕。

設備的分辨率resolution。

 

語法結構及用法

@media 設備名only (選取條件) not (選取條件) and(設備選取條件),設備二{sRules}

示例一:在link中使用@media:

<link rel=“stylesheet” type=“text/css” media=“only screen and (max-width: 480px),only screen and (max-device-width: 480px)” href=“link.css”/>

上面使用中only可省略,限定於計算機顯示器,第一個條件max-width是指渲染界面最大寬度,第二個條件max-device-width是指設備最大寬度。

示例二:在樣式表中內嵌@media:

@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min -device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

在示例二中,設置了電腦顯示器分辨率(寬度)大於或等於1024px(並且最大可見寬度為989px);屏寬在480px及其以下手持設備;屏寬在480px以及橫向(即480尺寸平行於地面)放置的手持設備;屏寬大於或等​​於480px小於1024px以及垂直放置設備的css樣式。

從上面的例子可以看出,字符間以空格相連,選取條件包含在小括號內,srules為兼容設置的樣式表,包含在中括號裡面。 only(限定某種設備,可省略),and(邏輯與),not(排除某種設備)為邏輯關鍵字,多種設備用逗號分隔,這一點繼承了css基本語法。

 

測試Media Queries

最後,我們需要對我們剛剛設計的Media Queries進行測試,想要在不同設備上測試Media Queries的效果,可以使用一個瀏覽工具來檢驗不同尺寸屏幕下的顯示效果,在這里為大家介紹一個不錯的在線工具– Responsivator,它可以模擬iPhone等各種不同設備,並且還可以自定義不同尺寸屏幕的顯示效果,只需要輸入一個url甚至是本地的一個url(如),就可以看到網站在不同尺寸屏幕下的顯示效果。

 

好了,我們明白了什麼是Media Query,那我們一起來運用到響應式佈局的設計項目中去。設計思路很簡單,首先先定義在標準瀏覽器下的固定寬度(假如標準瀏覽器的分辨率為1024px,那麼我們設置寬為980px),然後用Media Query來監測瀏覽器的尺寸變化,當瀏覽器的分辨率小於1024px的時候,則通過Media Query預設的樣式表來將頁面的寬度設置為百分比顯示,這樣子頁面的結構元素就會根據瀏覽器的的尺寸來進行相對應的調整。同理,當瀏覽器的可視區域改變到某個值(假如為650px)的時候,頁面的結構元素根據Media Query預設的層疊樣式表來進行相對應的調整。看看我們的例子:

 

/* 當瀏覽器的可視區域小於980px */

@media screen and (max-width: 980px) {
}

/* 當瀏覽器的可視區域小於650px */

@media screen and (max-width: 650px) {

}

通過上面我們就可以監測瀏覽器的可視區域變化的是時候我們的頁面結構元素也會相對應的變化,當然你可以再多設置幾個尺寸的監測層疊樣式表,這樣子就可以根據不同尺寸設備來進行響應式的佈局。為了更好的顯示效果,我們往往還要格式化一些CSS屬性的初始值:

 

/* 禁用iPhone中Safari的字號自動調整 */

html {

-webkit-text-size-adjust: none;

}

/* 設置HTML5元素為塊 */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

display: block;

}

 

/* 設置圖片視頻等自適應調整 */

img {

max-width: 100%;

height: auto;

width: auto9; /* ie8 */

}

.video embed, .video object, .video iframe {

width: 100%;

height: auto;

}

 

最後要注意的是在頁面的頭部<head></head>之間加上下面這句∶

<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

meta viewport這個屬性是在移動設備上設置原始大小顯示和是否縮放的聲明。

參數設置∶

width – viewport的寬度

height – viewport的高度

initial-scale – 初始的縮放比例

minimum-scale – 允許用戶縮放到的最小比例

maximum-scale – 允許用戶縮放到的最大比例

user-scalable – 用戶是否可以手動縮放

 

6.讓IE也支持CSS3 Media Query

當瀏覽器不支持Media Queries的時候就需要使用css3-mediaqueries.js
方法一:
<!-​​-[if lt IE 9]>
<scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]–>

方法二:
Respond.js 是一個快速、輕量的polyfill,用於為IE6-8 以及其它不支持CSS3 Media Queries 的瀏覽器提供媒體查詢的min-width 和max-width 特性,實現響應式網頁設計(Responsive Web Design )
測試頁面地址:http://scottjehl.github.io/Respond/test/test.html
Github地址:https://github.com/scottjehl/Respond

 

使用CSS Hack

IE各個版本對CSS都有一些怪異的支持模式,猜測是瀏覽器開發人員故意留下的,所以我們可以利用這種特性對IE瀏覽器進行CSS Hack。

Keith Clark在其博文《Moving IE specific CSS into @media blocks》提供了一種CSS Hack的新思路:

目標平台IE6或者IE7:

@media screen\9 {
body { background: red; }
}
目標平台IE6、7和8:

@media screen\,screen\9 {
body { background: green; }
}
目標平台IE8:

@media screen {
body { background: blue; }
}
目標平台IE8、9和10:

@media screen {
body { background: orange; }
}
目標平台IE9和10:

@media screen and (min-width:0) {
body { background: yellow; }
}

 

說了這麼多,先上傳一個簡單的響應式佈局demo,調整瀏覽器窗口大小,看看頁面的變化

-------------------------

<!doctype html>
<html>
<head>
<meta charset="utf-8″>
<title>Media Query Demos</title>
<style type="text/css">
.wrapper {
border: solid 1px #666;
padding: 5px 10px;
margin: 40px;
}

.viewing-area span {
color: #666;
display: none;
}

/* max-width */
@media screen and (max-width: 600px) {
.one {
background: #F9C;
}
span.lt600 {
display: inline-block;
}
}

/* min-width */
@media screen and (min-width: 900px) {
.two {
background: #F90;
}
span.gt900 {
display: inline-block;
}
}

/* min-width & max-width */
@media screen and (min-width: 600px) and (max-width: 900px) {
.three {
background: #9CF;
}
span.bt600-900 {
display: inline-block;
}
}

/* max device width */
@media screen and (max-device-width: 480px) {
.iphone {
background: #ccc;
}
}
</style>
</head>

<body>
<div class="wrapper one">This box will turn to pink if the viewing area is less than 600px</div>
<div class="wrapper two">This box will turn to orange if the viewing area is greater than 900px</div>
<div class="wrapper three">This box will turn to blue if the viewing area is between 600px and 900px</div>
<div class="wrapper iphone">This box will only apply to devices with max-device-width: 480px (ie. iPhone)</div>
<p class="viewing-area"><strong>Your current viewing area is:</strong> <span class="lt600″>less than 600px</span> <span class="bt600-900″>between 600 – 900px</span> <span class="gt900″>greater than 900px</span></p>
</body>
</html>

-------------------------

瀏覽運行代碼需至原網站的最底部才可見:http://www.w3cfuns.com/blog-5421655-5400685.html

 

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s