版权声明：转载请附上文章地址 https://blog.csdn.net/weixin_38134491/article/details/86559050
//下面是 index.html文件全部代码
<!DOCTYPE html>
<html>
<head>
<!--Bootstrap中一行可以分为12个块-->
<meta charset="utf-8">
<!-- 兼容移动端声明设置 -->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" />
<title>Bootstrap网站前端实战</title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/style1.css"/>
<script src="Bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/jquery-1.11.3.min.js"></script>
<script src="bootstrap/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/style1.js" type="text/javascript" charset="utf-8"></script>
<!-- 解决H5标签兼容性 -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- pc端头部制作 -->
<div class="headerbg1">
</div>
<div class="headerbg2">
</div>
<!-- pc端头部制作 -->
<!-- wap版头部制作 -->
<div class="wapheader">
<img src="images/pic1.png" width="100%" />
</div>
<div class="wapheader">
<img src="images/pic2.png" width="100%" />
</div>
<!-- wap版头部制作 -->
</body>
</html>
//下面是CSS样式中style1.css文件全部代码
.headerbg1{
width: 100%;
height: 274px;
background: url(../images/pic1.png) no-repeat center top;
}
.headerbg2{
width: 100%;
height: 445px;
background: url(../images/pic2.png) no-repeat center top;
}
/* wap端在pc端大小的时候隐藏*/
.wapheader{
display: none;
}
@media(max-width:720px){
.headerbg1{
display: none;
}
.headerbg2{
display: none;
}
/* wap版代码 */
.wapheader{
display: block; /* 在wap的时候显示上面被隐藏的wap端内容 */
}
.wapheader{
width: 100%;
height: auto;
text-align: center;
min-height: 30px;
margin-top: 0px; /*处理图片上下间隙问题*/
}
/* wap版代码 */
}PC端效果如下：
wap端效果如下：
