内容正在载入中,请稍后……
公告
About me
搜索
统计
其他
27 May.2013

响应式Web设计(RWD,Responsive Web Design) 不指定

作者: 我就是个世界   分类:技术&学习 » 网页设计   出处:本站原创            | |

响应式网页设计(RWD,Responsive Web Design)这个术语,由伊桑•马科特(Ethan Marcotte)提出。他在A List Apart发表了一篇开创性的文章,将三种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来,并命名为响应式网页设计。这个术语还有一堆表示相同意思的其他叫法,如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。





Highslide JS


响应式Web设计示例:(改变浏览器窗口大小来查看页面布局的变化)
        http://webdesignerwall.com/demo/adaptive-design/final.html
        TeamTreeHouse/

引用

Response Design的一些设计哲学

1.液态网格--舍弃过去常用的像素定意,改用类似百分比的方式来自我调适
2.动态布局结构--CSS Media Query或透过JS,透过侦测屏幕大小的方式,吃不同的CSS设定,而能动态摆放每一个网页Block的位置,例如三栏改为二栏或一栏
3.显示/隐藏内容--在某些Device上,某些行为是不适合运用的,这些内容就不该被传送出来(并非隐藏,基于节省无线频宽)
4.液态图片--可以细分成以下四种行为
(1)缩放图片--这里指的是相同的图档,动态的进行缩放,这部分还算单纯
(2)响应式图片--能够依据不同的状况,抛不同的解析度图片至不同的Device,利用不同图档来节省频宽,特别是无线环境下
(3)强制禁止缩图--有些图片,例如公司Logo,就可能不愿意被同比例缩小,而是保留原始大小,就需要特别定义出来
(4)自动裁减图片--例如有的把图档设成背景来用,这样在不同的环境下,就会出现类似自动裁剪图片的效果


响应式图片处理的困难之处

而4.(2)的响应式图片这部分又特别复杂,
依据这篇文章http://developer.51cto.com/art/201201/312187_1.htm还会遇到不少实作上的问题,例如
(1)如何避免J ava Script Race Condition的情况,导致无法预期Server会怎么取出图档,或干脆通通都给您(浪费频宽)
(2)CDN问题,CDN快取后就可能不管到底是什么设备,通通抛相同的图档出去

所以,该篇作者写了很多的解法出来,可以解决不同的问题,但每种解法都有不同的副作用,有一些是他推荐的解法,但仍要应地制宜,怕我功力不够,误导了各位,所以强烈建议看该篇文章。

个人心得:
除了响应式图片这块看起来技术上要考虑的点比较多之外,剩下我觉得变成是CSS+JS+XHTML操作的功力了,只是落实到实作上就会有许多交互影响要小心考虑,而有经验的Response Design Development Team就会变成相对重要,特别在图档处理可能不会是简单的事,要特别留意。

以上来源:http://miin1130.pixnet.net/blog/post/28483167
分享到QQ空间
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情