响应式布局使用的css技巧

响应式布局使用的css技巧主要有：

1.百分比。在设置元素的样式时，应使用百分比，而不是固定的数值，尤其

是图片的缩放，更是使用百分比，如果需要可以设置max-width。百分比的计算

公式为：

目标元素宽度/ 上下文元素宽度=百分比宽度

如将固定宽度

#wrap { width:960px;}#header{ width:940px; margin-left:10px; margin-right:10px;}img{ max-width:100%;}

html

改为百分比布局

#wrap { width:96%;}#header{ margin-left:1.041666666% /* 10/960

*/ margin-right:1.041666666% /* 10/960 */ width:97.9166667%;

/*940/960*/}

2.em替换px。em替换px主要应用于文字缩放。计算公式为

目标元素尺寸/ 上下文元素尺寸= 百分比尺寸

例如将下面的元素px

#wrap{ font-size:16px;}#content h1{ font-size:69px;}

浏览器默认字体是16px，所以可以改为：

#wrap{ font-size:100%;}#content h1{ font-size:4.3125em; /* 69 /

16 */}

3.媒体查询。这也是响应式查询的重点，页面之所以能适应不同的窗体大小，也

是因为媒体查询。媒体查询理解起来非常简单，就是在不同的窗体下，定义不同

的样式。例如：

/*窗体最大宽度960是执行*/@media screen and

(max-width:960px){ body{ background-color:red; }

h1{ font-size:14px; }}/*窗体最大宽度768是执行*/@media screen and

(max-width:768px){ body{ background-color:orange; } h1{ font-size:12px; }}/*窗体最大宽度320是执行手机*/@media screen and

(max-width:320px){ body{ background-color:green; }

h1{ font-size:10px; }}

如果我们需要引用样式，可以在页面添加

4.响应式布局兼容性。手机浏览器都兼容响应式布局，电脑浏览器中最新浏览器支持。ie8以下浏览器不支持，升级也比较麻烦。网上也有技巧兼容ie8浏览器，不过我测试了一下，ie8下是妥协支持了，之所以说妥协，是因为有些效果也不支持，ie6,ie7基本都不支持。尤其是让我生气的是，ie8妥协支持了，在chrome中有些效果感觉变形了。哎，ie8浏览器还是放弃吧，毕竟是为手机用户开发。

响应式布局的开发基本上就是以上四点，在加上html5。html5是进行页面布局的。如果需要加些特效，这时就可以使用jQuery。