标签：
响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
优点和缺点
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
要注意的是在页面的头部<head></head>之间加上下面这句∶
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
列子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
header{
height: 100px;
background: #0000ff;
}
footer{
height: 200px;
background: #ffff00;
}
/*PC端*/
@media screen and (min-width: 1000px) {
.all{
width: 1000px;
margin: 0 auto;
}
.content{
height: 300px;
}
.left{
background: #00ffff;
float: left;
width: 200px;
height: 100%;
}
.center{
background: blueviolet;
float: left;
width: 500px;
height: 100%;
}
.right{
background: brown;
float: left;
width:300px;
height: 100%;
}
}
/*平板端*/
@media screen and (min-width:768px) and (max-width: 999px){
.all{
width: 768px;
margin: 0 auto;
}
.content{
height: 300px;
}
.left{
background: #00ffff;
float: left;
width: 50%;
height: 100%;
}
.center{
background: blueviolet;
float: left;
width: 50%;
height: 100%;
}
.right{
display: none;
}
}
/*手机端*/
@media screen and (max-width: 767px) {
.all{
width: 100%;
margin: 0 auto;
}
.left{
background: #00ffff;
/*height: 150px;*/
}
.center{
background: blueviolet;
height: 150px;
}
.right{
background: brown;
height: 150px;
}
}
</style>
</head>
<body>
<div class="all">
<header>
我是网页的头部
</header>
<!--header结束-->
<div class="content">
<div class="left">
我是网页主体的左边
</div>
<!--左边结束-->
<div class="center">
我是网页主体的中间
</div>
<!--中间结束-->
<div class="right">
我是网页主体的右边
</div>
<!--右边结束-->
</div>
<!--内容部分结束-->
<footer>
我是网页的尾部
</footer>
<!--尾部结束-->
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/luofeng316148334/p/5062063.html
