公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

响应式互联网设计(5)

响应式互联网设计_www.uibq.com
图2:我们的人像图片能够响应性地改变布局以更好地适应小屏幕的呈现。

不用介意这里毫无规则的百分数,我们只是修改了早先的弹性网格以适应新的线性布局。总之,这里我们在视区宽度小于400px的情况下把三栏式的布局变为双栏式,从而使图片显得更为突出。

事实上,我们也可以用同样的方法来处理宽屏的情况。在高分辨率下可以采用六个一排的方式排列所有的图片:

@media screen and (min-width: 1300px) {
.figure,
    li#f-mycroft {
        margin-right: 3.317535545023696682%;    /* 21px / 633px */
        width: 13.902053712480252764%;          /* 88px / 633px */
  }
}

这样我们的图片在分辨率的高端和低端都能够优雅地呈现,从而能随着视窗宽度和设备分辨率的改变优化页面布局。

响应式互联网设计_www.uibq.com
图3: 通过新的媒介查询定义一个较宽的最小宽度值,我们成功地将图片调整成横排式布局。

然而,这仅仅是个开端。利用嵌入CSS的媒介查询,可以改变的远远不止几个图片的位置,我们可以为每个分辨率区间选择性地引入不同的布局设计,可以在宽屏模式下让导航部分更为突出,或者在小型屏幕中将导航移到题标之上。

响应式互联网设计_www.uibq.com
图4:通过响应式设计,我们不仅能够在小型设备中线形化地组织内容,还能够在一系列不同的显示设备上将设计做到最优化。

其实响应式设计并不仅限于改变布局。通过媒介查询我们能够相当精确地对页面进行重构:包括在小屏幕上扩大链接的目标区,从而更好地遵循触摸屏的费茨定律(Fitts' Law);包括对某些元素有选择性地显示或隐藏,从而改善页面的导航功能;还包括设置响应式排字法,渐进地改变字体大小和行距,从而为显示设备提供最优化的阅读体验。

技术上的几点注释

应当指出的是标准的现代浏览器对媒介查询的支持度是相对高的。台式电脑浏览器中例如Safari 3以上、Chrome、Firefox 3.5以上,以及Opera 7以上都自带媒介查询解析,近年的移动浏览器中Opera和WebKit也一样。当然,那些台式机浏览器的旧版本就无法支持媒介查询了。而微软尽管承诺了 要在IE 9中支持媒介查询,但目前为止Internet Explore仍没有出台自带的媒介查询功能。

关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)