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

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

　　我不打算繼續(xù)使用這樣的工作流了，因為它太費時間，在下一次靈活布局的嘗試中，我決定在開始的時候就使用百分比。

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

　　接下來要做什么？.

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

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

　　圖6 1910 x 1200 分辨率

　　同樣，圖7中的行文字長度在這個分辨率下變得不適于閱讀。

　　圖7 1910 x 1200分辨率下的行長度

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

　　圖8 1024 x 768 垂直方向

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

　　圖9 320 x 480分辨率

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