响应式布局开发-框架问题

1.什么是响应式布局？

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本的布局方式。（摘自度娘）

2.怎么设计响应式布局？

①利用CSS中的Media Query

设备的宽和高device-width，device-heigth显示屏幕/触觉设备。
渲染窗口的宽和高width，heigth显示屏幕/触觉设备。
设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color，color-index显示屏幕。
设备的分辨率resolution。

使用方法：
@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}
示例一：在link中使用@media：

上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。

示例二：在样式表中内嵌@media：
@media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {srules}
在示例二中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。
从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，srules为兼容设置的样式表，包含在中括号里面。
only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。

小注：这个方法就是开放性的开发，所有js、css都要前端人员去书写进度缓慢。

②利用前端框架开发

我推荐的10个前端框架有很多种比如
1. Twitter BootStrap （Apache v2.0；响应式）
2. Foundation （MIT；响应式）
3. 960gs（GPL&MIT；响应式）
4. Skeleton（MIT；响应式）
5. Kube（Free；响应式）
6. Less Framework（MIT；响应式）
7. G5 Framework（Free；HTML5、CSS、PHP）
8. YAML（Creative Commons）
9. YUI3:Grids CSS（BSD）
10.52framework（Creative Commons；HTML5）

小注：用前端框架开发响应式布局是比较简单的，只要看懂它们的文档其实都不是难办到；难办的是要了解这些框架的优劣在哪方面然后再看自己软件项目适合哪一类前端框架。比如我想用HTML5那么G5和52的框架就非常合适，再如我想用组件比较多的那我想BootStrap和YUI3是合适的。
总之要看清自己的软件项目的特点来选定前端框架。

原文地址：http://www.zcool.com.cn/article/ZNDg1NzI=.html