响应式网页设计基础也是重点：灵活性(7)

　　另外，这个网站会在我完成这个流程之前上线。因此，我将它拆分成可管理的模块，以便在不影响基本功能的前提下在本地测试新功能，在确保这些功能达到预期之后发布它们。

　　我不打算继续使用这样的工作流了，因为它太费时间，在下一次灵活布局的尝试中，我决定在开始的时候就使用百分比。

　　但是这种工作流的确给我教会了我很多东西：你可以在同一个布局中同时使用固定尺寸和百分比尺寸而不会引发任何问题(前提是你的数学公式是正确的)。如果你觉得使用百分比值有点儿困难，可以使用我尝试的这种方法：从固定的像素值开始，慢慢替换成百分比值。

　　接下来要做什么？.

　　即使灵活式的布局解决了大量不同分辨率的自适应问题，ee-podcast.com仍然需要media queries。也就是说，灵活和流动的布局只是响应式网页设计的一部分。

　　以图6为例，这张图展示了ee-podcast.com在一个24英寸桌面(1910 x 1200的分辨率)的灵活布局。这里，每个元素都是成比例的，但是仍然可以调整一些细节使得浏览体验变得更好，比如使Logo和主持人信息之间的距离变得小一点。

　　图6 1910 x 1200 分辨率

　　同样，图7中的行文字长度在这个分辨率下变得不适于阅读。

　　图7 1910 x 1200分辨率下的行长度

　　在稍小的分辨率下，会出现其他的问题.图8是网站在iPad上(水平方向)1024 x 768分辨率下的样式。比例缩放对自适应起到了一定作用，但是出现了浮动内容的显示错误和需要重新对齐的问题，以及其他的小问题。正如你所看到的，主持人信息跑到到了Logo下面，谷歌日历和.ics下载链接也出现了相似的问题。

　　图8 1024 x 768 垂直方向

　　在iPhone(垂直方向，320 × 480分辨率下)上，正如你在图9中看到的，比例缩放呈现出了极其糟糕的阅读体验。

　　图9 320 x 480分辨率

　　这些问题可以通过media queries来解决，media queries允许你为不同的设备和分辨率提供不同的样式。(要是你没留意我之前的建议，可以去读 《如何使用CSS3 Media Queries 应对不同设备》)。同时，我也为我的ma