響應(yīng)式設(shè)計入門-03 擁抱流式布局

1、擁抱流式布局本章內(nèi)容理解為什么響應(yīng)式設(shè)計需要百分比布局將元素的固定像素寬度轉(zhuǎn)換為百分比寬度將文字的固定像素大小轉(zhuǎn)換為等量的相對尺寸理解如何找到任意元素的上下文學(xué)習(xí)如何使圖片平滑縮放學(xué)習(xí)如何為不同的大小的屏幕提供不同的圖片學(xué)習(xí)如何讓媒體查詢與彈性圖片及流式布局協(xié)同工作使用 CSS 網(wǎng)格系統(tǒng)從頭創(chuàng)建一個響應(yīng)式布局即使在最近，當(dāng)我們針對某個特定的流行設(shè)備如 iPad 或者 iPhone，使用媒體查詢來制作修正版的布局時（類似第 2 章的例子），仍然是基于已知的視口寬度使用固定像素尺寸。但是，這種方法不是一種完全兼容未來的網(wǎng)頁制作方法。未來，還會出現(xiàn)更多大小不一的視口，我們需要一些適應(yīng)未知設(shè)備的方法。

2、為什么響應(yīng)式設(shè)計需要百分比布局在認(rèn)識到媒體查詢威力無比的同時，我們也要看到它的局限性。那些僅使用媒體查詢適應(yīng)不同視口的固定寬度設(shè)計，只會從一組 CSS 媒體查詢規(guī)則突變到另一組，兩者之間沒有任何平滑漸變。我們需要將固定像素布局轉(zhuǎn)換成靈活的百分比布局。這樣才能讓頁面元素根據(jù)視口大小在一個又一個媒體查詢之間靈活伸縮修正樣式。使用百分比布局創(chuàng)建流動的彈性界面，同時使用媒體查詢來限制元素的變動范圍。將這兩者組合到一起構(gòu)成了響應(yīng)式設(shè)計的核心。將網(wǎng)頁從固定布局修改為百分比布局當(dāng)前，我們通常是在Photoshop、 Fireworks 等軟件制作的設(shè)計圖中（基于像素單位）度量元素的大小、外邊距，然后將這些尺

3、寸直接寫進 CSS 代碼中。文字大小也是這樣設(shè)置的。我們在圖片編輯軟件中點擊一下文字對象，查看其具體尺寸（一般單位是像素），然后將其寫入對應(yīng)的 CSS代碼。那我們?nèi)绾螌⒐潭ǔ叽甾D(zhuǎn)換為相對尺寸呢？需要牢記的公式將固定像素寬度轉(zhuǎn)換對應(yīng)的百分比寬度：百分比寬度=目標(biāo)元素寬度上下文元素寬度v目標(biāo)元素是什么？v上下文元素是什么？使用上節(jié)課完成的基本HTML框架。沒有的話copy示例HTML到編輯器（p45）copy示例CSS到編輯器（p45-46）當(dāng)前所有的頁面內(nèi)容都被包裹在一個 ID 為#wrapper 的 div 中。在上面所示的 CSS 中可見，這個 div 被設(shè)置為外邊距自適應(yīng)，寬度 960 像

4、素。其樣式為：#wrapper margin-right: auto;margin-left: auto;width: 960px;作為最外層的 div，我們該把它的寬度定義為相對視口寬度的百分之多少呢？設(shè)置百分比元素的上下文最外層元素的百分比比較簡單，它的上下文就是視口寬度。一般設(shè)置90%100%之間。這取決于我們的感覺，保證網(wǎng)頁在視口內(nèi)有最美觀的視覺效果即可。#wrapper margin-right: auto;margin-left: auto;width: 96%; /* 控制最外層的 div */將里層元素從固定寬度改為百分比寬度#wrapper margin-right: aut

5、o;margin-left: auto;width: 960px;#header margin-right: 10px;margin-left: 10px;width: 940px;#header margin-right: 10px;margin-left: 10px;width:97.9166667%; /* 940 960 */將里層元素從固定寬度改為百分比寬度稍微有點復(fù)雜。先試試header元素。公式：百分比寬度=目標(biāo)元素寬度上下文元素寬度。#navigation 和#footer 的寬度也是基于像素的，我們使用相同的方法將它們轉(zhuǎn)換為百分比。側(cè)邊欄的寬度是 220 像素，但它有 2 像

6、素寬的邊框。我不想讓右側(cè)邊框的寬度隨著上下文變寬或是變窄，而是始終保持在 2 像素。所以需要將側(cè)邊欄的寬度減去一點。運行瀏覽器查看網(wǎng)頁效果接下來繼續(xù)使用 “ 百分比寬度=目標(biāo)元素寬度上下文元素寬度”這個公式，將頁面各處 10 像素的內(nèi)邊距、外邊距也替換成等價的百分比值。所有這些間距都基于 960 像素的上下文，所以替換成對應(yīng)的百分比值就是 1.0416667%（10 960）。這些數(shù)字可以四舍五入嗎？（閱讀p50）導(dǎo)航區(qū)域不太理想如果將視口尺寸縮小一點，只要一丁點，導(dǎo)航鏈接就會變成兩行。另外，如果將視口放大，導(dǎo)航鏈接之間的間距并不會相應(yīng)地增加。CSS代碼見p51標(biāo)簽結(jié)構(gòu)如下：可以看到鏈接被包裹在各自對應(yīng)的標(biāo)簽中。它們才是我們要找的外邊距的上下文元素?？纯礃?biāo)簽對應(yīng)的 CSS 代碼，會發(fā)現(xiàn)沒有為其設(shè)置寬度：#navigation ul li display: inline-block; 給li增加一個右外邊距，修改以后：#navigation u