關於響應時佈局..

什麼叫作響應式佈局？

也便是響應式Web設計。響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。

響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，隨着如今各類終端的快速發展，作出一些可以適應不一樣分辨率、不一樣平臺、不一樣屏幕大小的網頁尤其重要，這不只使得本身的網站適應不一樣終端的能力更強，同時也爲用戶帶來了良好的體驗。並且隨着目前大屏幕移動設備的普及，用大勢所趨來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。

怎樣實現響應式佈局？

對於這個問題，咱們能夠經過CSS3中的Media Query來實現，即媒介查詢。媒體查詢讓CSS能夠更精確做用於不一樣的媒體類型和同一媒體的不一樣條件。媒體查詢的大部分媒體特性都接受min和max用於表達」大於或等於」和」小與或等於」。如：width會有min-width和max-width媒體查詢能夠被用在CSS中的@media和@import規則上，也能夠被用在HTML和XML中。經過這個標籤屬性，咱們能夠很方便的在不一樣的設備下實現豐富的界面，特別是移動設備，將會運用更加的普遍。

首先咱們要容許網頁寬度自動調整

在網頁代碼的頭部，加入一行viewport元標籤：

1	< meta name = "viewport" content = "width=device-width, initial-scale=1" />

viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）爲1.0，即網頁初始大小佔屏幕面積的100%。

下面經過Media Query咱們能夠獲得不一樣設備屏幕的寬和高，從而咱們就能夠分別處理了。根據不一樣的設備屏幕寬度，設置不一樣的CSS。那麼這裏有兩種方法：

一、外聯樣式表

在這裏咱們能夠根據不一樣的設備載入不一樣的CSS樣式表

1	< link rel = "stylesheet" type = "text/css" media = "screen and (min-width:960px)" href = "css/gt-960px.css" >

當頁面寬度大於等於960px時，載入樣式表gt-960px.css

1	< link rel = "stylesheet" type = "text/css" media = "screen and (min-width:600px) and (max-width:960px)" href = "css/gt-600px-lt-960px.css" >

當頁面寬度大於等於600px且小於等於960px時，載入樣式表gt-600px-lt-960px.css

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

當頁面寬度小於等於600px時，載入樣式表lt-600px.css

二、樣式表中內嵌法

當頁面寬度大於等於960px時

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@media screen and ( min-width : 960px ){      .header,      .container,      .footer{          width : 960px ;      }                 .sidebarLeft,      .main,      .sidebarRight{          float : left ;          height : 400px ;      }      ... }

當頁面寬度大於等於600px且小於等於960px時

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@media screen and ( min-width : 600px ) and ( max-width : 960px ){      .header,      .container,      .footer{          width : 600px ;      }                  .sidebarLeft,      .main{          float : left ;          height : 400px ;      }      ... }

當頁面寬度小於等於600px時

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@media screen and ( max-width : 600px ){      .header,      .container,      .footer{          width : 400px ;      }                 .sidebarLeft,      .sidebarRight{          width : 400px ;          height : 100px ;      }      ... }

請注意，我這裏仍是用到了絕對寬度，如」width:400px;「，嚴謹地說，這仍是不夠規範的，固然這還要看具體狀況了，若是想徹底響應式佈局的話，那麼就不能使用固定的寬度了，能夠設爲自動或百分比，如」width:auto;「或」width:xx%;「，另外字體也要設爲百分比。

對於佈局來講，咱們算是搞定了，但頁面中的圖片和視頻也不能忽視。

彈性圖片

咱們須要爲圖片設置max-width: 100%和height: auto，來實現其彈性化。

1 2 3 4 5

img {      max-width : 100% ;      height : auto ;      width : auto 9 ; /* ie8 */ }

彈性內嵌視頻

一樣，對於視頻咱們也須要作max-width: 100%的設置；可是Safari對embed的該屬性支持不是很好，但咱們能夠用width: 100%來代替

1 2 3 4 5 6

.video embed , .video object, .video iframe {      width : 100% ;      height : auto ;