简易相应式布局

#pagewrap { width: 980px; margin: 0 auto; background-color: lightgrey; } #header { height: 160px; background-color: lightpink; } #content { width: 600px; float: left; background-color: lightblue; } #sidebar { width: 280px; float: right; background-color: lightcyan; } #footer { clear: both; background-color: lightgreen; }

@media screen and (max-width: 980px) { #pagewrap { width: 95%; } #content { width: 60%; padding: 3% 4%; } #sidebar { width: 30%; } #sidebar .widget { padding: 8% 7%; margin-bottom: 10px; } }

@media screen and (max-width: 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 { width: auto; float: none; margin: 20px 0; } #sidebar { width: 100%; float: none; margin: 0; } }

@media screen and (max-width: 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>