屏幕大于1200px时,内容尺寸改变
效果图
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/demo.css"/>
<title>Document</title>
</head>
<body>
<div class="container">
<header id="header">
<h3>页头</h3>
</header>
<nav id="navigation">
<h3>导航</h3>
</nav>
<section id="mainbody">
<h3>主体</h3>
<p>lalallalallalal啦啦啦啦啦啦啦啦lalallalallalal啦啦啦啦啦啦啦啦lalallalallalal啦啦啦啦啦啦啦啦lalallalallalal啦啦啦啦啦啦啦啦</p>
</section>
<aside id="sidebar">
<h3>边栏</h3>
<p>lalallalallalal啦啦啦啦啦啦啦啦lalallalallalal啦啦啦啦啦啦啦啦lalallalallalal啦啦啦啦啦啦啦啦lalallalallalal啦啦啦啦啦啦啦啦</p>
</aside>
<footer id="footer">
<h3>页脚</h3>
</footer>
</div>
</body>
</html>
css
body{
margin-top:40px;
text-align: center;
}
.container{
width: 960px;
margin:0 auto;
}
#header, #navigation, #mainbody, #sidebar, #footer{
line-height: 25px;
height: 100px;
background-color: rgb(187, 187, 187);
margin-bottom: 20px;
}
#mainbody, #sidebar{
float: left;
height: 300px;
}
#mainbody{
width: 520px;
margin-right: 20px;
background-color: blueviolet;
}
#sidebar{
width: 420px;
background-color: burlywood;
}
#footer{
clear: both;
}
@media screen and (min-width:1200px){
.container{
width: 1170px;;
}
#mainbody{
width: 720px;
margin-right: 20px;
background-color: blueviolet;
}
#sidebar{
width: 430px;
background-color: burlywood;
}
}