响应式设计入门-03 拥抱流式布局

1、拥抱流式布局本章内容理解为什么响应式设计需要百分比布局将元素的固定像素宽度转换为百分比宽度将文字的固定像素大小转换为等量的相对尺寸理解如何找到任意元素的上下文学习如何使图片平滑缩放学习如何为不同的大小的屏幕提供不同的图片学习如何让媒体查询与弹性图片及流式布局协同工作使用 CSS 网格系统从头创建一个响应式布局即使在最近，当我们针对某个特定的流行设备如 iPad 或者 iPhone，使用媒体查询来制作修正版的布局时（类似第 2 章的例子），仍然是基于已知的视口宽度使用固定像素尺寸。但是，这种方法不是一种完全兼容未来的网页制作方法。未来，还会出现更多大小不一的视口，我们需要一些适应未知设备的方法。

2、为什么响应式设计需要百分比布局在认识到媒体查询威力无比的同时，我们也要看到它的局限性。那些仅使用媒体查询适应不同视口的固定宽度设计，只会从一组 CSS 媒体查询规则突变到另一组，两者之间没有任何平滑渐变。我们需要将固定像素布局转换成灵活的百分比布局。这样才能让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围。将这两者组合到一起构成了响应式设计的核心。将网页从固定布局修改为百分比布局当前，我们通常是在Photoshop、 Fireworks 等软件制作的设计图中（基于像素单位）度量元素的大小、外边距，然后将这些尺

3、寸直接写进 CSS 代码中。文字大小也是这样设置的。我们在图片编辑软件中点击一下文字对象，查看其具体尺寸（一般单位是像素），然后将其写入对应的 CSS代码。那我们如何将固定尺寸转换为相对尺寸呢？需要牢记的公式将固定像素宽度转换对应的百分比宽度：百分比宽度=目标元素宽度上下文元素宽度v目标元素是什么？v上下文元素是什么？使用上节课完成的基本HTML框架。没有的话copy示例HTML到编辑器（p45）copy示例CSS到编辑器（p45-46）当前所有的页面内容都被包裹在一个 ID 为#wrapper 的 div 中。在上面所示的 CSS 中可见，这个 div 被设置为外边距自适应，宽度 960 像

4、素。其样式为：#wrapper margin-right: auto;margin-left: auto;width: 960px;作为最外层的 div，我们该把它的宽度定义为相对视口宽度的百分之多少呢？设置百分比元素的上下文最外层元素的百分比比较简单，它的上下文就是视口宽度。一般设置90%100%之间。这取决于我们的感觉，保证网页在视口内有最美观的视觉效果即可。#wrapper margin-right: auto;margin-left: auto;width: 96%; /* 控制最外层的 div */将里层元素从固定宽度改为百分比宽度#wrapper margin-right: aut

5、o;margin-left: auto;width: 960px;#header margin-right: 10px;margin-left: 10px;width: 940px;#header margin-right: 10px;margin-left: 10px;width:97.9166667%; /* 940 960 */将里层元素从固定宽度改为百分比宽度稍微有点复杂。先试试header元素。公式：百分比宽度=目标元素宽度上下文元素宽度。#navigation 和#footer 的宽度也是基于像素的，我们使用相同的方法将它们转换为百分比。侧边栏的宽度是 220 像素，但它有 2 像

6、素宽的边框。我不想让右侧边框的宽度随着上下文变宽或是变窄，而是始终保持在 2 像素。所以需要将侧边栏的宽度减去一点。运行浏览器查看网页效果接下来继续使用 “ 百分比宽度=目标元素宽度上下文元素宽度”这个公式，将页面各处 10 像素的内边距、外边距也替换成等价的百分比值。所有这些间距都基于 960 像素的上下文，所以替换成对应的百分比值就是 1.0416667%（10 960）。这些数字可以四舍五入吗？（阅读p50）导航区域不太理想如果将视口尺寸缩小一点，只要一丁点，导航链接就会变成两行。另外，如果将视口放大，导航链接之间的间距并不会相应地增加。CSS代码见p51标签结构如下：可以看到链接被包裹在各自对应的标签中。它们才是我们要找的外边距的上下文元素。看看标签对应的 CSS 代码，会发现没有为其设置宽度：#navigation ul li display: inline-block; 给li增加一个右外边距，修改以后：#navigation u