bootstrap框架使用？

头部：需要设置宽高为100%；--overflow:hidden;

body{
width:100%;
min-height: 100%;
/* height:auto;*/
position: relative
}
.container-fuild{
background-size: 100% 100%;
height:100%;
margin: 0;
padding: 0;
}
.second{
background-image: url(../images/erjiBG_02.jpg);
background-repeat: no-repeat;
width:100%;
min-height: 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}

每块内容的包裹的大div
*****.second .row{
width:100%;
}
.second .tiao{
background-image: url(../images/title_bg.png);
background-repeat: no-repeat;
width:100%;
margin-top: 50px;
-webkit-background-size: 100% auto;
background-size: 100% auto;
height:92px;
position: relative;
}

.second .yingyuan{
position: absolute;
right:260px;
top:-10px;
width:260px;
}
.second .back{
position: absolute;
top:-10px;
right:100px;
width:90px;
}

html:<div class="row logowrap ">
<!-- 左右各一个空的div各占一份 -->
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<img src="images/logo.png" class="logo"/>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
</div>

中间放六个按钮时：分别指定每个按钮的宽为固定的多少，

<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6">
<img src="images/index001a.png" alt="" class="f_btn yingyuan1 yingyuan">
</div>

独立一张大图：制定这张图的width为固定的

<div class="row mapwrap ">
<!-- 左右各一个空的div各占一份 -->
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<img src="images/map.png" class="map"/>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
</div>

一行三个内容：指定box_wrap的固定宽

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="box_wrap">
<div class="boxImg"></div>
<p>一体机&nbsp&nbsp国际交流</p>
<span class="btn1">开启</span>
<span class="btn2">关闭</span>
</div>
</div>

***上图下文本用一个大div包裹

.five .boxImg{
width: 120px;
height: 120px;
background-image: url(../img/10.png);
background-repeat: no-repeat;
background-color: #fdf8de;
background-position: center;
border-radius: 10%;
**margin: 0 auto;
}
.five .box_wrap{
width:300px;
text-align: center;
margin: 0 auto;
}
.five .box_wrap p{
font-size: 22px;
color:#ffd699 ;
margin-top: 15px;
padding-bottom: 10px;
}

对于一些按钮或者内容在不同屏幕上显示的大小是不同的，所以需要设置每一种大小的屏幕展现的大小怎样？

@media (min-width: 320px){
.five{
background-image: url(../img/erjiBG_02.jpg);
background-repeat: no-repeat;
width: 100%;
background-size: cover;

}
.five .content_dier>div{
margin-top: 30px;
}
.five .dier{
position: absolute;
right:100px;
top:-8px;
width:100px ;
}
.five .name_module{
margin-bottom: 10px;
}
.five .dier_name{
font-size: 20px;
color:#ffd699 ;
display: inline-block;
text-align: left;
width: 80px;

}
.five .back{
position: absolute;
right:40px;
top:-10px;
width:40px ;
}
}
@media (min-width: 768px){
.five{
background-image: url(../img/erjiBG_02.jpg);
background-repeat: no-repeat;
width: 100%;
background-size: cover;

}
.five .content_dier>div{
margin-top: 60px;
}
.five .name_module{
margin-bottom: 10px;
}
.five .dier_name{
font-size: 20px;
color:#ffd699 ;
display: inline-block;
text-align: left;
width: 80px;

}
.five .dier{
position: absolute;
right:180px;
top:-10px;
width:200px ;
}
.five .back{
position: absolute;
right:60px;
top:-10px;
width:73px ;
}
}
@media (min-width: 996px){
.five{
background-image: url(../img/erjiBG_02.jpg);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
min-height: 100%;
}
.five .content_dier>div{
margin-top: 60px;
}
.five .dier{
position: absolute;
right:260px;
top:-10px;
width:260px ;
}
.five .name_module{
margin-bottom: 10px;
}
.five .dier_name{
font-size: 20px;
color:#ffd699 ;
display: inline-block;
text-align: left;
width: 80px;

}
.five .back{
position: absolute;
right:100px;
top:-10px;
width:90px ;
}
}

@media (min-width: 1200px){
.five{
min-height: 100%;
}
body{
*****overflow: hidden;
}


.five .dier{
position: absolute;
right:260px;
top:-10px;
width:260px ;
}
.five .back{
position: absolute;
right:100px;
top:-10px;
width:90px ;
}

}