图2：我们的人像图片能够响应性地改变布局以更好地适应小屏幕的呈现。
不用介意这里毫无规则的百分数，我们只是修改了早先的弹性网格以适应新的线性布局。总之，这里我们在视区宽度小于400px的情况下把三栏式的布局变为双栏式，从而使图片显得更为突出。
事实上，我们也可以用同样的方法来处理宽屏的情况。在高分辨率下可以采用六个一排的方式排列所有的图片：
@media screen and (min-width: 1300px) {
.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px / 633px */
width: 13.902053712480252764%; /* 88px / 633px */
}
}这样我们的图片在分辨率的高端和低端都能够优雅地呈现，从而能随着视窗宽度和设备分辨率的改变优化页面布局。
图3： 通过新的媒介查询定义一个较宽的最小宽度值，我们成功地将图片调整成横排式布局。
然而，这仅仅是个开端。利用嵌入CSS的媒介查询，可以改变的远远不止几个图片的位置，我们可以为每个分辨率区间选择性地引入不同的布局设计，可以在宽屏模式下让导航部分更为突出，或者在小型屏幕中将导航移到题标之上。
图4：通过响应式设计，我们不仅能够在小型设备中线形化地组织内容，还能够在一系列不同的显示设备上将设计做到最优化。
其实响应式设计并不仅限于改变布局。通过媒介查询我们能够相当精确地对页面进行重构：包括在小屏幕上扩大链接的目标区，从而更好地遵循触摸屏的费茨定律（Fitts' Law）；包括对某些元素有选择性地显示或隐藏，从而改善页面的导航功能；还包括设置响应式排字法，渐进地改变字体大小和行距，从而为显示设备提供最优化的阅读体验。
技术上的几点注释
应当指出的是标准的现代浏览器对媒介查询的支持度是相对高的。台式电脑浏览器中例如Safari 3以上、Chrome、Firefox 3.5以上，以及Opera 7以上都自带媒介查询解析，近年的移动浏览器中Opera和WebKit也一样。当然，那些台式机浏览器的旧版本就无法支持媒介查询了。而微软尽管承诺了 要在IE 9中支持媒介查询，但目前为止Internet Explore仍没有出台自带的媒介查询功能。
