響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ).docx

《響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ).docx》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、By?EmilyP.Lewis??翻譯:?亓光宇?????在過(guò)去的一年里，如果你不是住在深山里，就一定知道響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，它已經(jīng)成為當(dāng)今的主流。響應(yīng)式設(shè)計(jì)是EthanMarcotte提出的，概念很簡(jiǎn)單：使網(wǎng)站的頁(yè)面布局能夠根據(jù)不同設(shè)備和分辨率進(jìn)行自動(dòng)調(diào)整。???當(dāng)我第一次了解到它時(shí)，我就立即被迷住了--特別是mediaqueries，我馬上就用到我自己的個(gè)人兼職網(wǎng)站上。我甚至寫(xiě)了一篇文章介紹《如何使用CSS3MediaQueries響應(yīng)不同設(shè)備》（強(qiáng)烈建議在讀這篇文章之前讀一下）。????在第一次嘗試使用mediaqueries后，我很快

2、意識(shí)到我忽略了一個(gè)響應(yīng)式設(shè)計(jì)的重點(diǎn)：靈活性。?挑戰(zhàn)固定寬度???我的個(gè)人兼職網(wǎng)站使用了固定寬度的設(shè)計(jì)，所有的width,margin和padding都使用了固定的像素值。我一般都會(huì)這樣寫(xiě)網(wǎng)站，因?yàn)閷?duì)我來(lái)說(shuō)它更簡(jiǎn)單，更快速。???但當(dāng)我試圖在我的固定寬度的網(wǎng)站上應(yīng)用mediaqueries的時(shí)候，那些簡(jiǎn)單和快速的優(yōu)勢(shì)全部都消失了。為什么?因?yàn)閷?duì)于固定寬度的設(shè)計(jì)，我需要非常細(xì)致的定義mediaqueries并在CSS文件中調(diào)整每個(gè)單獨(dú)的像素值，基本上，我需要為每一種可能的分辨率都設(shè)計(jì)一個(gè)全新的布局，繁瑣！慢?。∵€不好玩?。?！????我有幸聽(tīng)了

3、Marcotte先生在《InControl2011》的演講，他討論了響應(yīng)式設(shè)計(jì)的理論和最佳實(shí)踐，諸如fluidgrid(流體網(wǎng)格)實(shí)現(xiàn)方式。?流動(dòng)且靈活的公式???流動(dòng)式布局是靈活的。由于width，margin和padding（甚至字體和圖像）使用了百分比和em(相對(duì)長(zhǎng)度單位)，因此頁(yè)面布局會(huì)隨著瀏覽器的窗口變化而變化。隨著分辨率的改變，布局會(huì)成比例地進(jìn)行調(diào)整，實(shí)現(xiàn)過(guò)程中不需要用到任何mediaquery。???這對(duì)于實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)簡(jiǎn)直太美妙了。如果我有一個(gè)基于比例值的布局，流動(dòng)式的網(wǎng)格將替我完成大部分繁重的工作。我的media

4、query將不再需要包含那些覆蓋其他分辨率的所有width,margin和padding的樣式定義。?但是也有一點(diǎn)讓我感到頭疼，計(jì)算流動(dòng)式網(wǎng)格的比例寬度需要用到一些數(shù)學(xué)知識(shí)，我數(shù)學(xué)不太好…?幸運(yùn)的是,Ethan提供了一個(gè)很簡(jiǎn)單（即便對(duì)我來(lái)說(shuō)）的公式來(lái)計(jì)算比例寬度:?目標(biāo)寬度÷上下文寬度=結(jié)果（比例寬度）???這個(gè)公式用子元素的像素寬度（目標(biāo)寬度）除以它父元素的像素寬度（上下文寬度），得到的結(jié)果就是這個(gè)子元素的比例寬度。?圖1實(shí)例：目標(biāo)寬度（300px)和上下文寬度（960)像素???在圖1中,例如,深灰色區(qū)域?qū)挾葹?00px，包含在寬度為

5、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è)比例值:??1.aside?{?2.???????background-color:?#ccc;?3.???????float:?left;?4.???????width:?31.25%;?5.}?測(cè)試一下?????公式雖然看起來(lái)很簡(jiǎn)單，但我知道必

6、須在實(shí)際的網(wǎng)站中檢驗(yàn)一下才行。幸運(yùn)的是，我最近加入了EE播客，正在重新設(shè)計(jì)那個(gè)網(wǎng)站。當(dāng)我的搭檔給我她的PS設(shè)計(jì)文件時(shí)，我就決定將它打造成靈活布局的網(wǎng)站。?比例寬度????我首先記錄下所有元素的像素寬度。（在排版設(shè)計(jì)事，我們沒(méi)有嚴(yán)格遵循網(wǎng)格布局，這也是我建議的做法）正如你在圖2中看到的。整體寬度為940像素，Logo，主持人介紹和分享鏈接都有它們各自的像素寬度。?圖2主頁(yè)和頂部導(dǎo)航元素的像素寬度?按照Ethan的公式，整體寬度940px就是我的上下文寬度，根據(jù)它就可以確定所有元素的比例寬度.?Logo:240÷940=.255319148?

7、主持人介紹:436÷940=.463829787?分享鏈接:90÷940=.09574468?隨后我將這些浮點(diǎn)值轉(zhuǎn)換成百分比值，運(yùn)用到我的CSS中：??1.#logo?a?{?2.width:?25.5319148%;?/*?240px?/?940px?*/?3.}?4.#hosts?{?5.width:?46.3829787%;?/*?436px?/?940px?*/?6.}?7.#push?{?8.width:?9.574468%;?/*?90px?/?940px?*/?9.}???我沒(méi)有對(duì)這些百分比值進(jìn)行四舍五入，而是直接運(yùn)用在CS

8、S中。我也從來(lái)沒(méi)有遇到過(guò)任何瀏覽器對(duì)這樣精度的百分比值識(shí)別錯(cuò)誤的情況(包括IE)。???同時(shí)，我為每一個(gè)百分比值都注釋了計(jì)算它所用到的目標(biāo)寬度和上下文寬度，這對(duì)于今后的開(kāi)發(fā)來(lái)說(shuō)是非常重要的參考