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 来查看最终效果。调整你浏览器的大小，我们可以看到页面会根据视窗的大小自动调整布局。

　　更多例子

　　你可以访问下面的地址，查看更多相关例子： WordPress themes。我设计了如下media queries： Tisa, Elemin, Suco, iTheme2, Funki, Minblr, 和 Wumblr。


　　概述

　　默认情况下，页面容器的宽度是980px，这个尺寸优化了大于1024px的分辨率。Media query用来检查 viewport 宽度，如果小于980px他会变为窄屏显示模式，页面布局将会以流动的宽度代替固定宽度。如果 viewport 小于650px，他会变为mobile显示模式，内容、侧边栏等内容会变为单独列布局方式，他们的宽度占满屏幕宽度。


　　HTML代码

　　在这里，我不会介绍下面html代码中的细节。下面是布局页面的主框架，我们有一个“pagewrap”的容器包装了"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>