響應(yīng)式網(wǎng)頁設(shè)計(jì)基礎(chǔ)也是重點(diǎn)：靈活性(2)

　　目標(biāo)寬度÷上下文寬度=結(jié)果(比例寬度)

　　這個(gè)公式用子元素的像素寬度(目標(biāo)寬度)除以它父元素的像素寬度(上下文寬度)，得到的結(jié)果就是這個(gè)子元素的比例寬度。

　　圖1 實(shí)例：目標(biāo)寬度(300px)和上下文寬度(960)像素

　　在圖1中,例如,深灰色區(qū)域?qū)挾葹?00px，包含在寬度為960px的淺灰色區(qū)域中.這里,960像素區(qū)域是上下文元素,300像素區(qū)域是目標(biāo)元素,所以我們的數(shù)學(xué)公式是: 300 ÷ 960 = 0.3125

　　0.3125這個(gè)結(jié)果需要變成瀏覽器可識(shí)別的數(shù)值, 因此需要轉(zhuǎn)化成一個(gè)比例值, 將小數(shù)點(diǎn)右移兩位，變成31.25% 即可。然后在CSS中,將元素的寬度設(shè)定為這個(gè)比例值:

　　aside{ background-color:#ccc; float:left; width:31.25%; }

　　測試一下

　　公式雖然看起來很簡單，但我知道必須在實(shí)際的網(wǎng)站中檢驗(yàn)一下才行。幸運(yùn)的是，我最近加入了EE播客，正在重新設(shè)計(jì)那個(gè)網(wǎng)站。當(dāng)我的搭檔給我她的 PS 設(shè)計(jì)文件時(shí)，我就決定將它打造成靈活布局的網(wǎng)站。

　　比例寬度

　　我首先記錄下所有元素的像素寬度。(在排版設(shè)計(jì)事，我們沒有嚴(yán)格遵循網(wǎng)格布局，這也是我建議的做法)正如你在圖2中看到的。整體寬度為940像素，Logo，主持人介紹和分享鏈接都有它們各自的像素寬度。

　　圖2 主頁和頂部導(dǎo)航元素的像素寬度

　　按照 Ethan 的公式，整體寬度940px就是我的上下文寬度，根據(jù)它就可以確定所有元素的比例寬度.

　　Logo: 240 ÷ 940 = .255319148

　　主持人介紹: 436 ÷ 940 = .463829787

　　分享鏈接: 90 ÷ 940 = .09574468

　　隨后我將這些浮點(diǎn)值轉(zhuǎn)換成百分比值，運(yùn)用到我的CSS中：

　　#logo a{ width:25.5319148%;/*240px/940px*/ } #hosts{ width:46.3829787%;/*436px/940px*/ } #push{