响应式布局学习总结

响应式布局其实就是技术的综合。如果对html5,css3,jquery比较熟悉的话，那么学习响应式布局非常简单。

响应式布局无非就是利用css3的新特性来使页面适应不同的分辨率，如电脑中的1024*768，800*600，手机的320*480等等屏幕分辨率。

如果我们要实现比较复杂的功能，例如bootstrap中的nav，我们需要借助jquery来实现相关操作。我们在开发响应式网站时，简单的可以自己定义样式，复杂的完全可以使用bootstrap。

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

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

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

如将固定宽度

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

html

<div class="wrap">
<div class="header"></div>
</div>

改为百分比布局

#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;
    }
}

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

<link rel="stylesheet" type="test/css" media="screen" href="样式表地址" />

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

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