响应式设计

在解决对桌面和移动环境开发网站这个问题上,与分离网站的方法相反,一种相对较新(其实相当古老)的方法渐渐流行起来:摒弃用户代理检测,而是在客户端根据浏览器的能力进行页面变化。这种方法最早是由Ethan Marcotte在他为A List Apart所写的文章中提出的,也就是我们所熟知的响应式设计。和分离网站设计方式一样,响应式设计也有自己的优势和弊端。

优势

尽管一开始这种方法并不是为了创建移动端网站而提出的,但在近一段时间以来,作为分离式移动端网站的替代者,响应式设计作为一种向移动端友好的方向迈进的方式而备受关注。

  1. 因为无需为不同的设备维护不同的网站,这种方式节省了时间和金钱。
  2. 响应式设计为每一个页面提供了一个单独且独有的URL。
  3. 社会化分享统计(Facebook Likes, Tweets, +1 on Google plus)也不会割离开,因为移动端和桌面端使用的都是一个唯一的URL。
  4. 响应式设计无需考虑用户代理的检测。

这一方法有着许多非常好的方面。因为其不需要进行用户代理检测,相比于分离式网站方法,响应式设计更加具有韧性并经得起未来发展的考验。

弊端

当然,这一方法并非没有其局限性。因为内容必须在客户端使用Javascript进行调整,所以变化的内容要尽可能的最少。一般来说,当你尝试编写两组不同的Javascript来操作同一个DOM时,事情就会变得很麻烦。这也是为什么网络应用往往不采用这种方法的一个很重要的原因。

如果你的网站还没有支持弹性布局,那么将你的一个已有网站重新做响应式设计就必须重写你的样式。但是,这也有可能因祸得福。让你的网站成为响应式的设计,可能是一个升级和整理网站CSS的好机会。

最后,由于增加了脚本和样式的代码量,响应式的网站的性能可能会比分离式网站要差。尽管通过将脚本和样式进行合理的重构能够节省出一些资源,但性能的下降是无法避免的。

何时选择响应式设计

teixido_responsive-300x177.png正如上面所提到的,因为内容的改变很困难,当你使用响应式设计的时候,你无法给予用户一个有着显著区别的移动端体验,除非你大幅地增加代码的复杂度。也就是说,如果网站的桌面端和移动端内容非常相似,那么响应式设计就是一个很好的选择。那些以文档为中心的网站,他们在不同的设备上的主要用途都不会改变,比如一个产品页面,对于这种网站响应式的设计就非常的适合。你会注意到下面的例子全都是博客和宣传页面!

举例

尽管它还没有像分离式网站那么流行,但每天都有很多网站开始应用这项技术。幸运的是,因为所有的代码都是在客户端的,如果你想了解一个网站是如何实现这项技术的,只需要简单地访问该网站并查看他的页面源代码即可。下面是一些网站的例子:

尽管是一个相对较新的方法,响应式设计也逐渐积累了许多良好的经验。如果你正打算设计一个响应式网站,通常值得先创建一个小屏幕的设计,使得移动端的限制因素在一开始设计的时候就被考虑到。并且,这样更利于为你的样式使用渐进增强的技术,而不是使用Media Queries来隐藏已有网站中的元素。这样的话,那些老的不支持Media Queries的浏览器依旧能显示正确的布局。根据这一方法来设计的出色示范可以看这里

开发移动网站的途径

想了解移动平台开发的相关背景和其他方法,请参看以下文章。

参考

原稿信息

Originally published on 27 May, 2011 on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 3 - Responsive Design", by Jason Grlicky.

 

附件

文件 大小 日期 附加者为
teixido_responsive-300x177.png
78064 字节 2011-11-10 21:10:51 jswisher

Document Tags and Contributors

Contributors to this page: ziyunfei, cagen53070830, goodboy
最后编辑者: cagen53070830,