响应式布局案例实战
前几天做了一个响应式布局的案例，这里和大家分享一下，主要是总结一些经验。
1.html代码
<body>
<!-- 头部 -->
<header id="header">
<div class="logo">
<img src="images/largelogo.jpg" alt="logo" class="large">
<img src="images/middlelogo.jpg" alt="logo" class="middle">
<img src="images/smalllogo.jpg" alt="logo" class="small">
</div>
<div class="search">
<input type="search" name="kw" placeholder="请输入搜索内容">
<button>搜索</button>
</div>
<div class="nav">
<button id="btn">
<span></span>
<span></span>
<span></span>
</button>
<ul>
<li><a href="javascript:">首页</a></li>
<li><a href="javascript:">课程</a></li>
<li><a href="javascript:">公告</a></li>
<li><a href="javascript:">登录</a></li>
</ul>
</div>
</header>
<!--横幅 -->
<div id="banner">
<img src="images/banner.jpeg" alt="banner">
</div>
<!-- 主体内容 -->
<div id="main">
<div class="row">
<div class="col">
<a href="javascript:">
<img src="images/main1.jpeg">
</a>
<p>HTML5</p>
</div>
<div class="col">
<a href="javascript:">
<img src="images/main2.jpg">
</a>
<p>CSS3</p>
</div>
<div class="col">
<a href="javascript:">
<img src="images/main3.jpeg">
</a>
<p>LESS</p>
</div>
<div class="col">
<a href="javascript:">
<img src="images/main4.jpg">
</a>
<p>BootStrap</p>
</div>
</div>
<div class="row">
<div class="col">
<a href="javascript:">
<img src="images/main1.jpeg">
</a>
<p>HTML5</p>
</div>
<div class="col">
<a href="javascript:">
<img src="images/main2.jpg">
</a>
<p>CSS3</p>
</div>
<div class="col">
<a href="javascript:">
<img src="images/main3.jpeg">
</a>
<p>LESS</p>
</div>
<div class="col">
<a href="javascript:">
<img src="images/main4.jpg">
</a>
<p>BootStrap</p>
</div>
</div>
</div>
<!-- 页尾 -->
<footer id="footer">
</footer>
</body>
2.css代码
<style>
/* 初始化 */
body {
font-family: Arial;
font-size: 14px;
margin: 0;
padding: 0;
border: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
body {
background: #efefef;
}
/* 头部 */
#header{
height: 40px;
padding: 8px 0 15px 0;
background: #88c5e1;
border-bottom:5px solid #54abd4;
position: relative;
}
/* 头部logo */
#header .logo {
width: 25%;
text-align: center;
font-size: 0;
float: left;
}
#header .logo img{
height: 40px;
display: none;
}
#header .logo img.large{
display: inline-block;
}
@media (max-width: 1024px){
#header .logo img.large{
display: none;
}
#header .logo img.middle{
display: inline-block;
}
#header .logo img.small{
display: none;
}
}
@media (max-width: 640px){
#header .logo img.large{
display: none;
}
#header .logo img.middle{
display: none;
}
#header .logo img.small{
display: inline-block;
}
}
/* 头部搜索框 */
#header .search {
width: 50%;
float: left;
}
@media (max-width: 640px){
#header .search{
width: 60%;
}
}
#header .search input{
width: 80%;
height: 40px;
box-sizing: border-box;
padding: 0 10px;
float: left;
border: 1px solid #ccc;
border-radius: 10px 0 0 10px;
}
#header .search button{
width: 20%;
height: 40px;
box-sizing: border-box;
float:right;
border: 1px solid #ccc;
border-radius: 0 10px 10px 0;
}
/* 头部导航 */
#header .nav {
width: 25%;
float: left;
}
#header .nav button{
display: none;
}
#header .nav button span{
display: none;
}
#header .nav li{
width: 25%;
float: left;
height: 40px;
text-align: center;
font-size: 12px;
}
#header .nav li a{
display: block;
height: 40px;
color:#fff;
}
#header .nav li a:hover{
color:#888;
}
@media (max-width: 640px) {
#header .nav{
width: 15%;
}
#header .nav ul{
position: absolute;
top: 54px;
left: 0;
width: 100%;
background: #88c5e1;
height: 0;
overflow: hidden;
transition: .5s;
}
#header .nav ul.open{
height: 160px;
}
#header .nav li{
float: none;
text-align: center;
line-height: 40px;
width: 79%;
margin-top: 2px;
}
#header .nav button{
display: block;
padding: 9px 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin: 2px auto;
background: transparent;
}
#header .nav button span{
display: block;
width: 22px;
height: 2px;
background: #888;
margin-bottom: 5px;
}
#header .nav button span:last-child{
margin-bottom: 0;
}
}
/* banner */
#banner img{
width: 100%;
height: 400px;
}
/* 主体内容 */
#main{
width: 1000px;
margin: 10px auto;
}
#main .col{
float: left;
width: 25%;
box-sizing: border-box;
padding: 10px;
}
#main .col a{
display: block;
}
#main .col p{
padding:10px 0;
text-align: center;
font-size: 16px;
font-weight: 700;
background: #fff;
margin-top: 0;
box-sizing: border-box;
}
#main .col img{
display: block;
width: 100%;
height: 300px;
}
@media (max-width: 1024px){
#main .col{
width: 50%;
}
#main{
width: 100%;
}
}
@media (max-width: 640px){
#main .col{
width: 100%;
}
}
/* 页尾 */
#footer{
clear: both;
height: 400px;
}
</style>
js代码
<script>
(function(){
var btn = document.querySelector("#btn");
var navlist = document.querySelector(".nav ul")
btn.onclick=function(){
navlist.classList.toggle("open");
}
})();
</script>
3.效果图
- 屏幕大于1024px
- 屏幕大于640px,小于1024px logo变了，主体内容变为两列
- 屏幕小于640px logo变了，出现导航按钮，点击出现下拉列表，主体内容变为一列
4.总结
- 那个导航按钮我为图方便，我用的是span，其实可以用字体图标（css精灵图），用的所有插图都是网上随便找的，尺寸不是很合适，特别是banner那张图，已经变形啦，但无伤大雅，主要是拿来练手，大家想好看，可以先在ps上处理下。
- 头部和主体内容都是用浮动做的，其实可以用flex布局，主要是考虑到float的兼容性更好，在加上我们用的是pc优先，本来就是考虑其兼容性比移动优先要好，所以干脆让其好上加好。
- 那个下拉菜单是用定位做的，注意transition属性不能与display一起使用，我们想隐藏某个div，也可以将其高度设为0，相当于display:none;但此时应该会使文本内容溢出，所以还要设置overflow：hidden;想要显示时不能直接height：auto；要写死一个固定高度，这样才能实现一个过渡的动画效果。按钮可以看到是透明的，主要用来一个background:transparent;其实不设置背景的时候默认就是这个。
- 中间用了一点js，主要是控制导航按钮，单击按钮会出现下拉列表。巧妙地在ul后面加上了一个open类，所以我们只要控制有无open类，就可以控制其显示或隐藏，所以绑定按钮。js用的自调用函数，也可以Windows.onload(太老啦)。toggle方法正好满足我们的需求。
- 主体内容我没有用margin来调每列盒子之间的距离，而是用的padding，图片外的盒子设置一个padding，不加边框，不加背景，在设置一个box-sizing:border-box;效果其实和用margin一样，主要是这样避免了最后还要将最后一个margin给去掉。
- 这只是一个很简单的响应式布局的案例，初学者可以拿来练练手，会对响应式布局有更深的理解。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
