小析响应网页设计技术(ResponsiveWebDesign)

转自我的博客 http://blog.leeluolee.name/

Responsive Web Design 即一种新兴的网页设计方法，它基于CSS3的Media Query 语句,使得网页可以适应不同的设备。外国权威的网站给它的定义原文是这样的:

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

一句话来归纳就是,网页将随着你的设备的尺寸和你窗口缩放的尺寸自动重新布局 ,听起来有点拗口是吧,最近的例子就是我的博客.你在这里就可以做几个简单测试来理解Responsive Web Design  当然我还并没有做到很好 ):

1. 随便进入一个页面然后从最大尺寸（最好是1440以上开始）拖到320px以下,看屏幕的变化的情况 .
2. 如果有条件的话,用你的ipad与iphone的横屏模式与竖屏模式分别测试一下.
3. 在远古浏览器（IE<9）中重复1步骤 , 虾米都没发生, 就一平常不过的固定宽度980px的网页

你应该可以发现 布局甚至字体都开始随着屏幕的开始变动,而X滚动轴始终没有出现,移动设备横屏或竖屏但这当然不是简单的通过设置百分比宽度就能达到的效果。在我看来这种设计方法相对于普通流体布局的最大优势就是在保证自适应宽度之外(当然它自适应的更加优雅), 还可以使用网格系统设计网页!!! 这是国内常见的流体布局所做不到的(其实在国外Responsive Web Design 已经炒的非常热了,但是国内几乎还搜不到任何资料.) 。

当然,唯一的弱点就是media query并不支持IE<9. 已经可以用mediaqueries-js 使所有的浏览器支持media query. 我并没有这么做,我一直是热衷于差异对待的,当然我也不会激进的剥夺你浏览的权利(我的博客没有使用一张图片,都是CSS3完成的,所以外观的差异可以说相当大的.).

 

另外一个不得不考虑的问题就是如果按每个屏幕宽度都按固宽网格的方式设计布局,那最终出来的效果会非常不好,因为字体是随着具体的设备变化的(如果字体不变化,某些精细屏幕如ipad下的字体会非常的小), 固定不变的网格系统很容易设计得内容区域显得过宽或者过窄,在这里我借鉴了IA的处理方式,根据body的字号来确定网格的宽度,这样就可以节省相当的CSS代码.

我的博客使用的是7格网格系统（很囧吧是个质数…在大型网站或者是个错误的示范,但在个人博客的设计上却有奇效）,格宽与格距为常规的9:1(也就是9em 与1em) ,按中文宋体一般来讲最佳的显示大小14px来算,

在不是移动设备,并且屏幕处于1025-1440(国内电脑的绝大部分吧) 之间时,是980px的固宽的显示效果.

在屏幕超过1440时, 字体为18px,宽度为1260,边距留空也相当大,不会有突兀的感觉.

当屏幕小于1025时, 我设置宽度为39em 也就是 624px , 留空稍微多了点,但是考虑到要优化移动高清屏幕的显示,并且1024的显示器目前应该不会占很大的份额

在ipad横屏和竖屏时,我分别将字体设置为20px与18px 经过计算 也不会有横向溢出的情形.

接着分别处理 <640px   <480px   <320px 的情况就可以了.

这样设计下来,其实你会发现你的CSS代码量会非常可观~我这么简单的博客CSS尺寸达到了未压缩前24KB的胖体（当然主要原因是大量的CSS3属性涉及到了-0-  -webkit- -moz-等分支）…但是一切都是值得的。

综上所述我对于Responsive Web Design 的总结就是:

1. 只根据设备尺寸设计font-family, font-size等细部.
2. 主要根据屏幕宽度的缩放,设计布局 这一步是与第一步协同进行的.
3. 使用变宽(基于body的font-size)的网格系统.
4. 考虑某些精细屏幕的设备,比如ipad下的字体大小问题,对大屏幕(>1440)的字体也做放大处理

 

参考资源

1. Responsive Web Design: What It Is and How To Use It
2. Responsive Web Design
3. CSS Media Query for Mobile is Fool’s Gold
4. Examples Of Flexible Layouts With CSS3 Media Queries