响应式布局
什么叫做响应式布局？
也即是响应式Web设计。
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
这个概念是为解决移动互联网浏览而诞生的。
怎样实现响应式布局？
对于这个问题，我们可以通过CSS3中的Media Query来实现，即媒介查询。
媒体查询让CSS 可以更精确作用于不同的媒体类型和同一媒体的不同条件。
媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。
如：width会有min-width和max-width 媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。
通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。
首先我们要允许网页宽度自动调整
在网页代码的头部，加入一行viewport元标签：
<meta name=”viewpoint” content=”width=device-width,initial-scale=1”>
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
下面通过Media Query我们可以得到不同设备屏幕的宽和高，从而我们就可以分别处理了。
根据不同的设备屏幕宽度，设置不同的CSS。
那么这里有两种方法：
1、外联样式表
在这里我们可以根据不同的设备载入不同的CSS样式表
当页面宽度大于等于960px时，载入样式表gt-960px.css
当页面宽度大于等于600px且小于等于960px时，载入样式表gt-600px-lt-960px.css
当页面宽度小于等于600px时，载入样式表lt-600px.css
2、样式表中内嵌法
当页面宽度大于等于960px时
当页面宽度大于等于600px且小于等于960px时
当页面宽度小于等于600px时
请注意，我这里还是用到了绝对宽度，如”width:400px;“，严谨地说，这还是不够规范的，当然这还要看具体情况了，如果想完全响应式布局的话，那么就不能使用固定的宽度了，可以设为自动或百分比，如”width:auto;“或”width:xx%;“，另外字体也要设为百分比。
对于布局来说，我们算是搞定了，但页面中的图片和视频也不能忽视。
弹性图片
我们需要为图片设置max-width: 100%和height: auto，来实现其弹性化。
弹性内嵌视频
同样，对于视频我们也需要做max-width: 100%的设置；但是Safari对embed的该属性支持不是很好，但我们可以用width: 100%来代替
一、显示器屏幕屏幕比例
目前常见的显示器屏幕比例（长:宽）有四种：
∙5:4 = 1.25
∙4:3 = 1.33
∙16:10 = 1.60
∙16:9 = 1.77
以上屏幕比例越靠后屏幕看起来越“扁”，越靠前看起来越“正"。
屏幕尺寸和宽高比例是绝对概念。
二、显示器常见分辨率
再来看一下常见分辨率有哪些，由于显示器分辨率概念是相对的（物理分辨率是绝对的），随制造工艺的不同、显卡性能不同还会有所差异，最佳分辨率可能不同，但显示屏的理论最高分辨率都是确定的（制造工艺确定）。
下面是一些常见的分辨率，并不完整，比如还有320×240、640×480等分辨率则大多使用在监视器或小屏幕手持设备上。
∙800×640（宽高比1.25），800×600（宽高比1.33）
∙1024×768（宽高比1.33），
∙1280×960（宽高比1.33），1280×1024（宽高比1.25），1280×800（宽高比1.60），1280×720（宽高比1.77）
∙1400×1050（宽高比1.33），1440×900（宽高比1.60），1440×810（宽高比1.77）∙1600×1200（宽高比1.33），
∙1680×1050（宽高比1.60），1680×945（宽高比1.77）
∙1920×1200（宽高比1.60），1920×1080（宽高比1.77）
∙2048×1536（宽高比1.33），
响应式布局使用的css技巧主要有：
1.百分比。
在设置元素的样式时，应使用百分比，而不是固定的数值，尤其是图片的缩放，更是使用百分比，如果需要可以设置max-width。
百分比的计算公式为：
目标元素宽度/ 上下文元素宽度=百分比宽度
如将固定宽度
3.媒体查询。
这也是响应式查询的重点，页面之所以能适应不同的窗体大小，也是因为媒体查询。
媒体查询理解起来非常简单，就是在不同的窗体下，定义不同的样式。
例如：
4.响应式布局兼容性。
手机浏览器都兼容响应式布局，电脑浏览器中最新浏览器支持。
ie8以下浏览器不支持，升级也比较麻烦。
网上也有技巧兼容ie8浏览器，不过我测试了一下，ie8下是妥协支持了，之所以说妥协，是因为有些效果也不支持，ie6,ie7基本都不支持。
尤其是让我生气的是，ie8妥协支持了，在chrome中有些效果感觉变形了。
哎，ie8浏览器还是放弃吧，毕竟是为手机用户开发。
响应式布局的开发基本上就是以上四点，在加上html5。
html5是进行页面布局的。
小如果需要加些特效，这时就可以使用jQuery。