随着科技日新月异的发展，屏幕分辨率越来越高，4k屏的普及，1366屏已经很少见了，而1024屏更是几乎无人在使用了。现如今响应式的处理已经越来越少了，这对开发者来说是个好消息。但在一些大型网站还是做了响应式的处理，我们以京东首页为例，来看看是如何实现的吧：
效果图：
浏览器宽度较大时的效果：
浏览器宽度较大时的效果图.png
浏览器宽度较小时的效果：
浏览器宽度较小时的效果图.png
对比发现仅仅是整体宽度及中间的div的宽度改变，而其它没有改变。整体改变的宽度恰好等于中间div改变的宽度。
代码：
浏览器宽度较大时——jdbig.css
*{
margin: 0;
padding: 0;
}
body{
background: ghostwhite;
}
.user{
width: 100%;
height: 30px;
background: #F1F1F1;
}
.user #user{
width: 1210px;
height: 30px;
background: #A3A3A3;
margin: 0 auto;
}
.top{
width: 100%;
height: 80px;
background: #F04848;
}
.top img{
display: block;
margin: 0 auto;
}
.search{
width: 100%;
height: 150px;
background: #FFFFFF;
}
#center{
width: 100%;
height: 454px;
background: #F04848;
}
#center #flash{
margin: 0 auto;
width: 1210px;
height: 454px;
margin-bottom: 500px;
position: relative;
}
#center #flash #left{
float: left;
width: 235px;
height: 454px;
background: white;
}
#center #flash #gg{
width: 740px;
height: 454px;
float: left;
background: #05FFE9;
}
#center #flash #right{
float: right;
width: 235px;
height: 454px;
background: white;
}
浏览器宽度较小时——jdsmall.css
*{
margin: 0;
padding: 0;
}
body{
background: ghostwhite;
}
.user{
width: 100%;
height: 30px;
background: #F1F1F1;
}
.user #user{
width: 1010px;
height: 30px;
background: #A3A3A3;
margin: 0 auto;
}
.top{
width: 100%;
height: 80px;
background: #F04848;
}
.top img{
display: block;
margin: 0 auto;
}
.search{
width: 100%;
height: 150px;
background: #FFFFFF;
}
#center{
width: 100%;
height: 454px;
background: #F04848;
}
#center #flash{
margin: 0 auto;
width: 1010px;
height: 454px;
margin-bottom: 500px;
position: relative;
}
#center #flash #left{
float: left;
width: 235px;
height: 454px;
background: white;
}
#center #flash #gg{
width: 540px;
height: 454px;
float: left;
background: #05FFE9;
}
#center #flash #right{
float: right;
width: 235px;
height: 454px;
background: white;
}
页面布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/jdbig.css" media="screen and (min-width:1210px)" />
<link rel="stylesheet" type="text/css" href="css/jdsmall.css" media="screen and (max-width:1210px)" />
</head>
<body>
<div class = "user">
<div id="user">
</div>
</div>
<div class = "top">
</div>
<div class="search"></div>
<div id="center">
<div id="flash">
<div id="left"></div>
<div id="gg"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
如有问题欢迎交流。
如转载请注明出处，谢谢！
网友评论