响应式布局学习总结

响应式布局其实就是技术的综合。若是对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。