自适应和响应式和区别和应用
自适应：网站PC端和手机端都是同一个页面元素，比如LOGO、导航栏、图片、文章等都使用同一套，但是在不同的设备及浏览器中展示的排列顺序不同，
比如电脑上每行展示4个调用图片，到了手机上可能就是两行每行2张调用图片。但是首先明确的就是这个网站无论什么设备上展示，他所使用的页面元素都是这同一个元素。
无论是PC站还是移动站点统一内容展示网址路径不变。
像淘宝京东那样的网站是些了两套页面的因为他们的数据量大所以手机端和客户端的网页分别写了两套现在网页基本都是以上三种实现方式 、
自适应 : 需要使用Bootstrap 框架里的栅格系统才可以实现栅格系统；
大屏效果
中屏效果
小屏效果
大屏效果和小屏效果的切换
大屏中开头是两个图片 一个大图一个小图，浏览器视口变小屏后图片单独成为一行而不是像大屏的时候是在同一行上面的这里就要说到Bootstrap的栅格系统的使用方法了
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，
这里是我画 的图片可以根据我下面的代码来理解
<!-- 这是英特尔网的第一个大图这里在一个row里十二分之8先给这个大图 -->
<div class="row col-md-8 col-sm-12">
<img src="img/intel.web.864.486.1.jpg" class="img-responsive" alt="Responsive image">
<div class="row num">
<div class="tin col-md-12 ">
<h1>五代酷睿芯, 强劲创体验</h1>
<a href="">
<p>第五代英特尔酷睿处理器光芒登场,革命性突破的领先技术,彻底颠覆传统PC体验 ,带您进入全新数字世界</p>
</a>
<button type="button" class="btn btn-info">立刻开始探索第五代英特尔酷睿处理器</button>
</div>
</div>
</div>
<!-- //终于通过不懈的努力吧栅格系统玩会了 以后注意要看清楚布局啊一直在做无用功-->
<!-- 这里是英特尔网里右边的一个小图.小图里有两给内容所有需要用一个DIV包裹起来分别用给12份 -->
<div class="container col-md-4">
<!-- 这里是右侧小图分为十二分之4 -->
<div class="row col-sm-6 col-md-12">
<img src="img/intel.web.368.207.1.jpg" class="img-responsive" alt="Responsive image">
</div>
<!-- 这里变成小屏的时候这两个div需要垂直居中所有需要将他们分别设置为col-sm-6这样他们才可以居中 -->
<!-- 如果都给6份的话就会在一起不会上下分开 -->
<div class="row col-sm-6 col-md-12">
<div class="" id="ing">
<div class=" col-md-4 col-xs-4">
<img src="img/intel.web.81.108.png" class="img-responsive" alt="Responsive image">
</div>
<div class="por col-md-8 col-xs-8">
<a href="">英特尔酷睿M处理器</a>
<br>
<a href="">神奇的实感技术</a>
<br>
<a href="">英特尔凌动处理器</a>
<br>
<a href="">2015台北国际电脑展</a>
<br>
<a href="">风暴英雄游戏道具兑换</a>
</div>
</div>
</div>
</div>
响应式：响应式网站则不同，电脑版网站上和手机版网站上所展现的内容可能是同一元素也可能是不同的。
响应式也是通过技术手段识别使用者的设备和浏览器情况，根据得到的结果来确定展现的内容，但是PC站点和移动站点可以展现相同或者完全不同的内容，同样是是网址路径不变。
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
响应式布局是根据判断使用者设备和浏览器分辨率的情况来判断使用对应的css样式，也就是说如何使用响应式布局的话需要编辑多个css样式。
注意的地方
宽度需要使用百分比
#head { width: 100% }
#content { width: 50%; }
处理图片缩放
简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。
img { width: auto; max-width: 100%; }
下面是一个案例通过媒体查询来改变页面样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width,initial-scale = 1">
<title>实现响应式布局效果</title>
<link href="lesson23.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="heading"></div>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
<div class="footing"></div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.heading,.container,.footing{
margin: 10px auto
}
.heading{
height: 100px;
background-color: chocolate;
}
.left,.right,.main{
background-color: cornflowerblue;
}
.footing{
height:100px ;
background-color: aquamarine;
}
//屏幕宽度大于960px的样式
@media screen and (min-width: 960px) {
.heading,.container,.footing{
width:960px ;
}
.left,.main,.right{
float: left;
height: 500px;
}
.left,.right{
width: 200px;
}
.main{
margin:0 5px;
width:550px;
}
.container{
height: 500px;
}
}
//屏幕宽度在600px-960px之间
@media screen and (min-width: 600px) and (max-width: 960px) {
.heading,.container,.footing{
width: 600px;
}
.left,.main{
float: left;
height: 400px;
}
.right{
display: none;
}
.left{
width: 160px;
}
.main{
width:435px;
margin-left: 5px;
}
.container{
height: 400px;
}
}
//屏幕宽度小于600px时候的样式
@media screen and (max-width: 600px){
.heading,.container,.footing{
width:400px;
}
.left,.right{
width: 400px;
height: 100px;
}
.main{
margin-top: 10px;
width: 400px;
height:200px;
}
.right{
margin-top:10px;
}
.container{
height: 420px;
}
}
响应式布局的优点
1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备适应问题
响应式布局的缺点
1.兼容各种设备工作量大，效率低下
2.代码累赘，会出现隐藏无用的元素，加载时间加长
浙公网安备 33010602011771号