简易相应式布局
#pagewrap {
980px;
margin: 0 auto;
background-color: lightgrey;
}
#header {
height: 160px;
background-color: lightpink;
}
#content {
600px;
float: left;
background-color: lightblue;
}
#sidebar {
280px;
float: right;
background-color: lightcyan;
}
#footer {
clear: both;
background-color: lightgreen;
}
@media screen and (max- 980px) {
#pagewrap {
95%;
}
#content {
60%;
padding: 3% 4%;
}
#sidebar {
30%;
}
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
}
@media screen and (max- 650px) {
#header {
height: auto;
}
#searchform {
position: absolute;
top: 5px;
right: 0;
}
#main-nav {
position: static;
}
#site-logo {
margin: 15px 100px 5px 0;
position: static;
}
#site-description {
margin: 0 0 15px;
position: static;
}
#content {
auto;
float: none;
margin: 20px 0;
}
#sidebar {
100%;
float: none;
margin: 0;
}
}
@media screen and (max- 480px) {
html {
-webkit-text-size-adjust: none;
}
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
}
<header>
<div id="pagewrap">
<header id="header">
<hgroup>
<h1 id="site-logo">Demo</h1>
<h2 id="site-description">Site Description</h2>
</hgroup>
<nav>
<ul id="main-nav">
<li><a href="#">Home</a></li>
</ul>
</nav>
<form id="searchform">
<input type="search">
</form>
</header>
<div id="content">
<article> blog post</article>
</div>
<aside id="sidebar">
<section> widget</section>
</aside>
<footer id="footer"> footer</footer>
</div>
</header>