css3引入@media,可以根据设备特性进行不同的布局,
本文展示的是根据不同屏幕的宽度进行不同的布局,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 针对浏览器宽度调整布局 </title>
<style type="text/css">
/* 设置默认的CSS样式 */
#container{
text-align: center;
margin:auto;
width:750px;
}
#container>div{
border:1px solid #aaf;
text-align: left;
box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding: 5px;
}
div#left{
width:300px;
height:260px;
float:left;
}
div#main{
width:450px;
height:260px;
float:left;
clear:right;
}
div#right{
width:750px;
float:left;
}
/* 设置当浏览器宽度大于1000px时的CSS样式 */
@media screen and (min-width:1000px){
#container{
text-align:center;
margin:auto;
width:960px;
}
#container{
border:1px solid #aff;
box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding:5px;
}
div#left{
width:240px;
float:left;
height:260px;
}
div#main{
width:460px;
float:left;
height:260px;
clear:none;
}
div#right{
width:260px;
float:left;
height:260px;
}
}
/* 设置当浏览器宽度小于480px时的CSS样式 */
@media screen and (max-width: 480px){
#container{
text-align: center;
margin:auto;
width:450px;
}
#container>div{
border:1px solid #aaf;
box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding:5px;
}
div#left{
width:450px;
float:left;
height:150px;
}
div#main{
width:450px;
float:left;
height:260px;
clear:both;
}
div#right{
width:450px;
float:left;
height:170px;
}
}
</style>
</head>
<body>
<div id="container">
<div id ="left">
<h2>紫薯布丁紫薯布丁</h2>
<ul>
<li>紫薯布丁紫薯布丁</li>
<li>紫薯布丁紫薯布丁</li>
<li>紫薯布丁紫薯布丁</li>
</ul>
</div>
<div id = "main">
<h2>紫薯布丁紫薯布丁</h2>
疯紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁
？？？？紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁
紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯
紫薯布丁紫薯布丁
</div>
<div id="right">
<h2>紫薯布丁紫薯布丁</h2>
..紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁
</div>
</div>
</body>
</html>
以下是宽度为847.27的屏幕的效果
以下是宽度为463.64px的效果:
参考《疯狂H5+CSS3+JS讲义》(第2版)P319~P320
1055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
