HTML5实践 -
<div id="cnblogs_post_body"> 转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/21/2781388.html现在屏幕分辨率的范围很大，从 320px (iPhone) 到 2560px (大型显示器)，甚至更大。用户也不只是使用台式电脑访问web站点了，他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍，如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。
demo预览地址：http://webdesignerwall.com/demo/adaptive-design/final.html
demo下载地址：http://www.webdesignerwall.com/file/adaptive-design-demo.zip
第一次运行
在开始之前，我们可以查看 最终demo 来查看最终效果。调整你浏览器的大小，我们可以看到页面会根据视窗的大小自动调整布局。
http://pic002.cnblogs.com/images/2012/303151/2012112217235716.jpg
更多例子
你可以访问下面的地址，查看更多相关例子： WordPress themes。我设计了如下media queries： Tisa, Elemin, Suco, iTheme2, Funki, Minblr, 和 Wumblr。
概述
默认情况下，页面容器的宽度是980px，这个尺寸优化了大于1024px的分辨率。Media query用来检查 viewport 宽度，如果小于980px他会变为窄屏显示模式，页面布局将会以流动的宽度代替固定宽度。如果 viewport 小于650px，他会变为mobile显示模式，内容、侧边栏等内容会变为单独列布局方式，他们的宽度占满屏幕宽度。
http://pic002.cnblogs.com/images/2012/303151/2012112217253149.jpg
HTML代码
在这里，我不会介绍下面html代码中的细节。下面是布局页面的主框架，我们有一个&ldquo;pagewrap&rdquo;的容器包装了"header", "content", "sidebar", 和 "footer"。
<div class="cnblogs_code"><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 class="post"> blog post </article> </div> <aside id="sidebar"> <section class="widget"> widget </section> </aside> <footer id="footer"> footer </footer> </div>
页:
[1]