今天的屏幕分辨率范围从320像素（iPhone）到2560像素（大显示器）甚至更高。用户不仅仅在台式计算机上浏览网站。今天的用户使用手机、小型笔记本电脑和平板设备（例如iPad或Playbook）访问Internet。所以传统的定宽设计已经不适用了。网页设计需要具有适应性。页面布局应自动适应所有分辨率和设备。本教程将向您展示如何使用HTML5和CSS3媒体查询来创建跨浏览器的响应式设计。先看一个例子在开始之前，看看最终的demo是什么样子的。调整浏览器大小，看看页面布局如何根据视口宽度（浏览器的可视区域）自动浮动。更多示例如果您想查看更多示例，请查看我使用媒体查询设计的以下WordPress模板：Tisa、Elemin、Suco、iTheme2、Funki、Minblr和Wumblr。概述对于宽度大于1024像素的任何分辨率，页面容器的宽度将为980像素。媒体查询用于检查如果视口窄于980px，则页面布局变为流动宽度而不是固定宽度。如果视口窄于650px，页面布局会将内容容器和侧边栏扩展到全宽，从而形成单列布局。HTML代码我不会深入探讨HTML代码的细节。下面是页面布局的整体结构。我有一个pagewrap容器，可以将页眉、内容、侧边栏和页脚包装在一起。
