响应式布局当今很流行的一个设计理念。什么是响应式布局？我的理解是根据不同大小的屏幕显示不同的页面布局。
响应式布局怎么设计?
一种比较简单的方法就是利用CSS3的Media Query来实现。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
CSS 语法：
@media mediatype and|not|only (media feature) { CSS-Code; }
例子：
方式一：外链式
<!-- 当屏幕≤480px时背景显示为红色 -->
<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width:480px)">
方式二：内嵌式
<!-- 当屏幕大于480px时背景为黄色 --> <style type="text/css"> @media screen and (min-width:480px){ body{background: yellow;} }
原文：http://www.cnblogs.com/linyewei/p/4432668.html