响应式布局

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

    1.百分比。在设置元素的样式时，应使用百分比，而不是固定的数值，尤其是图片的缩放，更是使用百分比，如果需要可以设置max-width。百分比的计算公式为：

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

    如将固定宽度

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

改为百分比布局

#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{            }    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。