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

　　另外，這個(gè)網(wǎng)站會(huì)在我完成這個(gè)流程之前上線。因此，我將它拆分成可管理的模塊，以便在不影響基本功能的前提下在本地測(cè)試新功能，在確保這些功能達(dá)到預(yù)期之后發(fā)布它們。

　　我不打算繼續(xù)使用這樣的工作流了，因?yàn)樗M(fèi)時(shí)間，在下一次靈活布局的嘗試中，我決定在開始的時(shí)候就使用百分比。

　　但是這種工作流的確給我教會(huì)了我很多東西：你可以在同一個(gè)布局中同時(shí)使用固定尺寸和百分比尺寸而不會(huì)引發(fā)任何問(wèn)題(前提是你的數(shù)學(xué)公式是正確的)。如果你覺(jué)得使用百分比值有點(diǎn)兒困難，可以使用我嘗試的這種方法：從固定的像素值開始，慢慢替換成百分比值。

　　接下來(lái)要做什么？.

　　即使靈活式的布局解決了大量不同分辨率的自適應(yīng)問(wèn)題，ee-podcast.com仍然需要media queries。也就是說(shuō)，靈活和流動(dòng)的布局只是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的一部分。

　　以圖6為例，這張圖展示了ee-podcast.com在一個(gè)24英寸桌面(1910 x 1200的分辨率)的靈活布局。這里，每個(gè)元素都是成比例的，但是仍然可以調(diào)整一些細(xì)節(jié)使得瀏覽體驗(yàn)變得更好，比如使Logo和主持人信息之間的距離變得小一點(diǎn)。

　　圖6 1910 x 1200 分辨率

　　同樣，圖7中的行文字長(zhǎng)度在這個(gè)分辨率下變得不適于閱讀。

　　圖7 1910 x 1200分辨率下的行長(zhǎng)度

　　在稍小的分辨率下，會(huì)出現(xiàn)其他的問(wèn)題.圖8是網(wǎng)站在iPad上(水平方向)1024 x 768分辨率下的樣式。比例縮放對(duì)自適應(yīng)起到了一定作用，但是出現(xiàn)了浮動(dòng)內(nèi)容的顯示錯(cuò)誤和需要重新對(duì)齊的問(wèn)題，以及其他的小問(wèn)題。正如你所看到的，主持人信息跑到到了Logo下面，谷歌日歷和.ics下載鏈接也出現(xiàn)了相似的問(wèn)題。

　　圖8 1024 x 768 垂直方向

　　在iPhone(垂直方向，320 × 480分辨率下)上，正如你在圖9中看到的，比例縮放呈現(xiàn)出了極其糟糕的閱讀體驗(yàn)。

　　圖9 320 x 480分辨率

　　這些問(wèn)題可以通過(guò)media queries來(lái)解決，media queries允許你為不同的設(shè)備和分辨率提供不同的樣式。(要是你沒(méi)留意我之前的建議，可以去讀 《如何使用CSS3 Media Queries 應(yīng)對(duì)不同設(shè)備》)。同時(shí)，我也為我的ma