IT兄弟连 HTML5教程 响应式布局实例

在学习Media Queries模块前，先通过一个响应式布局实例来了解一下响应式布局和Media Queries模块的简单应用。在本例中，使用HTML5的结构元素定义了5个盒子。当浏览器窗口尺寸不同时，页面会根据当前窗口的大小选择使用不同的样式。当窗口宽度在1000px以上时，页头和页脚分别在页面的最上方和最下方整行显示，中间主体分为三列显示；当窗口宽度在640px以上、1000px以下时，中间的第三列隐藏；而当窗口宽度在640px以下时，5个区块从上到下排列显示。代码如下所示：

在本例中，通过不同的屏幕分辨率访问可以获取不同的样式，在各自的样式中重新设置了每个区块的布局，不仅需要改变布局样式，在不同的屏幕分辨率下，字体、图片及背景图片同样需要重新设置样式，以适应当前屏幕下的内容展示。至于要判断多少种分辨率，完全取决于产品的需求。常见的分辨率种类有手机、平板电脑（注意这些终端是存在横屏、竖屏区别的）、桌面显示器，一般大于960px的显示器都可以采用默认样式而不必在媒体查询里判断。本例在不同屏幕分辨率下的展示效果如图1～图3所示。

图1  窗口宽度在1000px

图2  窗口宽度在640px以上、1000px以下时的页面显示

图3  窗口宽度在640px以下时的页面显示

在不同窗口大小的子样式区域中，可以继承全局的样式，只要重新设置需要改变的样式即可。另外，有一些次要的区块内容为了页面摆放合适，可以将其隐藏。如在图2中，窗口宽度为640～1000px时，将右部区块隐藏。