图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仍没有出台自带的媒介查询功能。