公众账号

二维码 微信扫描关注

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

响应式互联网设计(2)

响应式互联网设计_www.uibq.com
图1:大尺寸的图片会以超大尺寸显示。我们的这个设计布局尽管是弹性的,但对于分辨率和视区(Viewport)尺寸的变化不能很好地响应。

然而,无论是固定式还是非固定式布局,没有一种设计能够超越其原本所意图的媒介环境而天衣无缝地进行伸缩。这个范例在 较大的浏览器窗口改变尺寸的时候能完全伸缩自如,但当分辨率降低时压力马上就出现了。在小于800x600的分辨率之下,左上角题标背后的插画边缘很快被 裁去,导航部分的文字的分行变得很不雅观,而右下侧的图片则缩小到难以辨认的地步。而同样受到影响的不仅仅是低分辨率的一端,在宽屏显示器中图片则很快变 成笨重的超大尺寸,令周围的文字内容不堪排挤。

总之,我们的弹性设计在以普通电脑显示屏为出发点的环境下能够游刃有余,但超出这个范围之外优化程度就很低了。

向响应式发展

近来一种叫“响应式建筑”的新兴专业正开始探讨实体空间应该如何对身处其间的人进行响应的问题。建筑师们结合嵌入式机器人技术和可拉伸的材料,对艺术装置和墙体结构进行实验,使其在人群接近的时候能够弯曲、伸缩或扩张。同时将气候控制系统与运动感应器结合还能够根据空间所容纳的人数多少来调节室温和环境光。某些公司已研制了“智能玻璃技术”,这种玻璃能够在室内人数达到一定密度的时候变为不透明以增加私密性。

迈克尔·福克斯(Michael Fox)和迈尔斯·坎普(Miles Kemp)在《交互建筑》(Interactive Architecture)一书中把这种适应性较强的方法描述为“一种多次循环的系统,这个系统就是一次对话,一次持续而建设性的信息交流。”我理解的重 点在“持续而建设性的信息交流”上,因为这里有一个微妙而又强有力的区别:与其为特定的空间体验而创建不可变的空间,他们的建议是人和建筑能够并且应该相 互进行影响。

这就是我们的出路。与其为越来越多不同的互联网设备量身定做一个个相互割裂的设计, 我们应该把这些设计需要当作同一个体验的不同层面来处理。我们的设计可以针对一个理想的视觉体验,而同时嵌入各种基于互联网标准的技术使其更有弹性,更能 适应不同媒介的呈现。简言之,我们应该推行响应式互联网设计。然而,应该如何开始呢?

引入媒介查询(media query)

自从CSS 2.1开始,我们的样式表逐渐从媒介类别(media types)中取得了一些终端设备的意识。如果你写过打印样式表,那你已经熟悉这个概念了:

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