响应式布局

响应网页设计是一种布局方法，根据屏幕尺寸自动调整，说的是该网站的设计可以适应用户屏幕尺寸，和手机电脑等。
允许设计者使用相同的HTML文件，通过检验浏览器窗口的大小，方位，屏幕分辨率等在颜色样式表上建立多个布局。

从而能够根据所使用的设备
的不同属性，显示不同样式(根据不同分辨率 显示不同的效果).
响应式设计让你的网站更加灵活，以CSS适配的方式,尽量高的提高设备上的使用性。

优点：

　　面对不同分辨率设备灵活性强

　　能够快捷解决多设备显示适应问题

缺点：

　　兼容各种设备工作量大，效率低下

　　代码累赘，会出现隐藏无用的元素，加载时间加长

　　其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果

　　一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

根据不同分辨率 显示不同的效果。

1:手机端分辨率
　　　　＜768

2：平板

　　　　768~992

3：电脑

　　　　992以上

而BootStrap还做了一个超大屏的

　　≥1200

响应式布局可用的设备参数：





响应式布语法：

　　@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

@media screen and (min-width:992px){//电脑
.box{
width:992px;
}
}

@media screen and (min-width:768px) and (max-width:992px){//平板
.box{
width:768px;
}
}

@media screen and (max-width:768px){//手机
.box{
width:100%;
}
}

示例：

　　

*pc端*/
@media screen and (min-width: 992px){
.box{
width: 992px;
}

/*其他css*/

}

/*平板*/
@media screen and (min-width: 768px) and (max-width: 992px){
.box{
width: 768px;
}

/*其他css*/
}

/*手机端*/
@media screen and (max-width: 768px){
.box{
width: 100%;
}

/*其他css*/

}