一、響應布局？貌似沒聽過哈

技術的發展往往導致新事物的產生。關于web頁面布局，我們應該聽過固定布局(fixed layout)、流體布局(fluid layout)，那響應布局(responsive layout)是哪個鳥蛋呢？

在說響應布局之前，我們先類比下固定布局和流體布局。先隨便找兩個網站截個圖，例如豆瓣網和google analytics：

豆瓣網就是固定布局，無論如何change瀏覽器的寬度，頁面主體區域的寬度是固定不變了，里面的內容布局也是打死不動的；Google的產品頁面 基本上都是流體布局（有時也稱自適應布局），例如google analytics，當你change瀏覽器的寬度，顯示區域也會如同水流般自適應于顯示器的寬度顯示（瀏覽器寬度變一點，web頁面寬度也跟著變一 點），主體結構布局不變。

那響應布局呢？就是瀏覽器的寬度滿足某一個條件的時候，web頁面的布局發生變化。這種變化往往不僅僅是web頁面寬度的變化，還有主體結構布局的改變。

所謂一圖勝千言，一例勝千圖。我們來看一個“偽響應布局”的例子——京東商城。
京東商城的首頁是個神奇的頁面，其布局會因用戶客戶端顯示器的分辨率不同而不同，注意，是顯示器分辨率，不是瀏覽器。所以，如果你是寬屏瀏覽器，通過改變瀏覽器寬度的方法是看不到different布局的。

下圖為1024像素顯示器寬度和1680像素下(1280像素寬度就足夠了)的京東商城頁面布局截圖。

京東商城的頁面符合“客戶端顯示設備寬度不同，page頁面布局不同（例如中間幻燈片圖片的尺寸）”，為何還稱之為“偽響應布局”呢？因為其沒有表現出“響應”這個動作。一旦web頁面載入完畢，就算你不停拖動瀏覽器直到顯示器生出老繭，其頁面布局都是不動。

二、應運而生？貌似有故事

文章標題中有個成語 – 應運而生。表示適應時機而產生。那這個時機是指？——兩個：一是寬屏的愈發普及；二是CSS3 media queries屬性的誕生。

寬屏現在占據大半壁江山，有必要針對這些瀏覽器設計web頁面，但是又不同舍棄1024普屏分辨率，顯然固定布局自身受限，流體布局實現有難度，對設計技術都是挑戰。于是自然想到寬屏下一種布局，普屏下一種布局（京東目前做法）。

想法雖好，但是卻好技術的支持。恰好，CSS3跟寬屏顯示器一樣，愈發普及與成熟，其中media queries屬性似乎就是為響應布局而誕生的。通過CSS代碼，實現不同寬度顯示器下不同的布局，可以即時響應的web頁面布局。

CSS3 media queries屬性基本信息和相關文章可以參考這里：CSS3 media queries使用參考指南

于是，很簡單的，針對不同寬度瀏覽器實現不同的布局，只要在web頁面頭部放入類似下面的代碼即可：

<link rel="stylesheet" type="text/css" href="common.css" media="all" /> <link rel="stylesheet" type="text/css" href="normalScreen.css" media="screen and (max-width: 1024px)" /> <link rel="stylesheet" type="text/css" href="widthScreen.css" media="screen and (min-width: 1024px)" />

三、響應布局實例頁面

OK，下面偶們來看一個真正意義上的響應布局頁面（ IE6~8瀏覽器可以提前放國慶回家了）：
您可以狠狠地點擊這里：web頁面響應布局demo頁面

在1024寬度下，demo頁面張這個樣子，導航在上面：

在寬屏下，例如1280像素寬度下，導航在左邊——有效利用網頁的寬度，降低滾動高度，使一屏顯示更多信息：

您可以拉伸瀏覽器的寬度查看demo頁面是如何響應布局的。

代碼部分
您可以右鍵demo頁面，然后查看源代碼查看CSS如何引用的。如果您跟我一樣，能夠坐著決不站著，能夠躺著決不坐著，能夠滾屏決不點擊的話，可以直接看下面的代碼展示：

<link rel="stylesheet" type="text/css" href="http://www.zhangxinxu.com/study/css/demo.css" media="all" /> <link rel="stylesheet" type="text/css" href="normalScreen.css" media="screen and (max-width: 1024px)" /> <link rel="stylesheet" type="text/css" href="widthScreen.css" media="screen and (min-width: 1024px)" />

normalScreen.css的完整代碼如下（沒看頭，可忽略）：

.nav{border-bottom:1px solid #ededed; background-color:#F0F3F9; text-align:center;} .nav h4{display:inline-block; *display:inline; margin:0 1em; padding:5px 1em; *zoom:1;} .nav .on{display:inline-block; padding:1px 8px; border-radius:2px; box-shadow:inset 0 1px 1px rgba(0,0,0,.5); background-color:#34538b; color:#fff;} .nav .on:hover{text-decoration:none;} .content{padding:2em; background-color:#fff; text-align:center;}

widthScreen.css的完整代碼如下（依舊沒看頭，可忽略）：

.nav{width:15%; height:428px; border-right:1px solid #ededed; background-color:#F0F3F9; text-align:center; float:left;} .nav h4{margin:0; *zoom:1;} .nav a{display:block; padding:8px 2em;} .nav a:hover{background-color:#beceeb; text-decoration:none; text-shadow:1px 1px #f0f3f9;} .nav .on{box-shadow:inset 0 1px 1px rgba(0,0,0,.5); background-color:#34538b; color:#fff;} .nav .on:hover{background-color:#34538b; text-shadow:none;} .content{padding:2em; background-color:#fff; text-align:center;}

可以看到，導航部分的CSS代碼是大相徑庭的。

四、不管IE6/IE7/IE8？貌似不友好吧

雖說俺們心里頭都希望IE6~8早點回家過國慶，但畢竟人家年輕的時候勞苦功高，總不能因為人家現在年老體衰就讓人家遣散回家。本著人文主義關懷，我們還是要照顧一下他們的。

咋照顧呢？跟不上時代的人那，只能用傳統的方法替代解決了。替代之匙就是JavaScript。對于IE6/IE7/IE8瀏覽器，我們使用JavaScript，根據用戶顯示器的分辨率，為其動態創建一個CSS 文件，然后，沒有然后了，問題即搞定。

如果要手把手教呢，就是在頭部head標簽中嵌入如下的code：

<script> if (!window.screenX) { //IE6~8 var oStyle = document.createElement("link"); oStyle.rel = "stylesheet"; oStyle.type = "text/css"; if (screen.width > 1024) { oStyle.href = "widthScreen.css"; } else { oStyle.href = "normalScreen.css"; } document.getElementsByTagName("head")[0].appendChild(oStyle); } </script>

您可以狠狠地點擊這里：兼顧IE6~8瀏覽器響應布局頁面demo

截圖就是上面兩張截圖其中之一的模樣，就懶得重復放置了。

五、結束咯

恩，想了想，沒啥子其他話好說。大家吃好喝好，喝好吃好！

鍵盤聲音敲得過于急促，因此文中難免有表述不準確的地方，歡迎指正。也歡迎交流，感謝閱讀。

總結

以上是生活随笔為你收集整理的应运而生的web页面响应布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。