应运而生的web页面响应布局
一、響應布局？貌似沒聽過哈
技術(shù)的發(fā)展往往導致新事物的產(chǎn)生。關(guān)于web頁面布局，我們應該聽過固定布局(fixed layout)、流體布局(fluid layout)，那響應布局(responsive layout)是哪個鳥蛋呢？
在說響應布局之前，我們先類比下固定布局和流體布局。先隨便找兩個網(wǎng)站截個圖，例如豆瓣網(wǎng)和google analytics：
豆瓣網(wǎng)就是固定布局，無論如何change瀏覽器的寬度，頁面主體區(qū)域的寬度是固定不變了，里面的內(nèi)容布局也是打死不動的；Google的產(chǎn)品頁面 基本上都是流體布局（有時也稱自適應布局），例如google analytics，當你change瀏覽器的寬度，顯示區(qū)域也會如同水流般自適應于顯示器的寬度顯示（瀏覽器寬度變一點，web頁面寬度也跟著變一 點），主體結(jié)構(gòu)布局不變。
那響應布局呢？就是瀏覽器的寬度滿足某一個條件的時候，web頁面的布局發(fā)生變化。這種變化往往不僅僅是web頁面寬度的變化，還有主體結(jié)構(gòu)布局的改變。
所謂一圖勝千言，一例勝千圖。我們來看一個“偽響應布局”的例子——京東商城。
京東商城的首頁是個神奇的頁面，其布局會因用戶客戶端顯示器的分辨率不同而不同，注意，是顯示器分辨率，不是瀏覽器。所以，如果你是寬屏瀏覽器，通過改變?yōu)g覽器寬度的方法是看不到different布局的。
下圖為1024像素顯示器寬度和1680像素下(1280像素寬度就足夠了)的京東商城頁面布局截圖。
京東商城的頁面符合“客戶端顯示設備寬度不同，page頁面布局不同（例如中間幻燈片圖片的尺寸）”，為何還稱之為“偽響應布局”呢？因為其沒有表現(xiàn)出“響應”這個動作。一旦web頁面載入完畢，就算你不停拖動瀏覽器直到顯示器生出老繭，其頁面布局都是不動。
二、應運而生？貌似有故事
文章標題中有個成語 – 應運而生。表示適應時機而產(chǎn)生。那這個時機是指？——兩個：一是寬屏的愈發(fā)普及；二是CSS3 media queries屬性的誕生。
寬屏現(xiàn)在占據(jù)大半壁江山，有必要針對這些瀏覽器設計web頁面，但是又不同舍棄1024普屏分辨率，顯然固定布局自身受限，流體布局實現(xiàn)有難度，對設計技術(shù)都是挑戰(zhàn)。于是自然想到寬屏下一種布局，普屏下一種布局（京東目前做法）。
想法雖好，但是卻好技術(shù)的支持。恰好，CSS3跟寬屏顯示器一樣，愈發(fā)普及與成熟，其中media queries屬性似乎就是為響應布局而誕生的。通過CSS代碼，實現(xiàn)不同寬度顯示器下不同的布局，可以即時響應的web頁面布局。
CSS3 media queries屬性基本信息和相關(guān)文章可以參考這里：CSS3 media queries使用參考指南
于是，很簡單的，針對不同寬度瀏覽器實現(xiàn)不同的布局，只要在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像素寬度下，導航在左邊——有效利用網(wǎng)頁的寬度，降低滾動高度，使一屏顯示更多信息：
您可以拉伸瀏覽器的寬度查看demo頁面是如何響應布局的。
代碼部分
您可以右鍵demo頁面，然后查看源代碼查看CSS如何引用的。如果您跟我一樣，能夠坐著決不站著，能夠躺著決不坐著，能夠滾屏決不點擊的話，可以直接看下面的代碼展示：
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早點回家過國慶，但畢竟人家年輕的時候勞苦功高，總不能因為人家現(xiàn)在年老體衰就讓人家遣散回家。本著人文主義關(guān)懷，我們還是要照顧一下他們的。
咋照顧呢？跟不上時代的人那，只能用傳統(tǒng)的方法替代解決了。替代之匙就是JavaScript。對于IE6/IE7/IE8瀏覽器，我們使用JavaScript，根據(jù)用戶顯示器的分辨率，為其動態(tài)創(chuàng)建一個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
截圖就是上面兩張截圖其中之一的模樣，就懶得重復放置了。
五、結(jié)束咯
恩，想了想，沒啥子其他話好說。大家吃好喝好，喝好吃好！
鍵盤聲音敲得過于急促，因此文中難免有表述不準確的地方，歡迎指正。也歡迎交流，感謝閱讀。
總結(jié)
以上是生活随笔為你收集整理的应运而生的web页面响应布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CNN 反向传播推导
- 下一篇： 再问数据中台 - 数据中台和业务中台服务