CSS之Responsive设计和CSS3 Media Queries的结合

随着高科技的发展，现在我们浏览网页不在局限于PC机上了，用户可使用上网的设备是越来越多的品种：手机、小笔记本、iPad、Playbook，以及PC机，而且PC机的显展大小各不一致。这样一来不同的屏幕分辨率范围就产生了：320px至2560px不等。换句话说，以前我们那种固定布局的设计所受的局限性就越来越大了。为了能让我们制作出来的Web页面能适应这些设置，就需要一个适应性的设计，需要能自动调整，以适应所有显示分辨率和设备的布局

目标效果

在开始之前，我们先来看一个DEMO效果，大家慢慢缩小你的显屏，你将会看到不同的布局效果来适应你的显屏大小

概述

对于显屏大于1024px宽度来说，我们常常是将页面的容器设置为980px。其实我们可以使用CSS3的Media Queries来检查浏览器可视窗口的大小。当显屏的可视窗口小于980px时，我们布局不在采用固定宽度而将采用流体宽度布局来替代；如果显屏可视窗口的宽度小于650px时，我们主内容宽度和边栏宽度都将变成全屏，并一列显示出来

1. html

2. css

接下来我们主要来看一下布局上的主要样式，细节大家回头看文件慢慢品味。在这里我们在页面的容器“div#pagetwrap”设置了一个固定宽度“980px”，并且让他居中显示；在“div#header”为页头设置了一个固定高度“160px”，并且将主内容“div#content”给了一个“600px”的宽度左浮动，边栏“div#sidebar”宽度设置为“280px”，并且将其设置为一个右浮动。主要代码如下所示

这样的DEMO效果是:不管怎么样缩放浏览器，宽度都是定死的980px，因为到这里我们还没有使用到css3 Media query

3. 下面我们开始导入css3 media query：

3.1 导入Media Queries的JavaScript脚本

Media Queries是CSS3的一个属性，那么他在IE6-8下，我不说大家都懂的，为了解决能在IE6-8下运行，就需要导入一个css3-mediaqueries.js的javaScript的脚本文件

3.2 导入Media Queries CSS样式文件

3.3 显屏可视化窗口小于980px（流体布局）

前面也说过当显屏可视化窗口小于980px时，我们将使用流体布局来替代固定布局。那么将在流体布局中使用下面几个规则

- div#pagewrap”重设宽度为95%

- div#content”重设宽度为60%

- div#sidebar”重设宽度为30%

请注意此时仅仅是将固定布局中的固定宽度替换成了百分比宽度，而原来固定宽度中的左右浮动仍然是存在的

3.4 显屏窗口小于650px使用一列布局

上面我们实现了两种效果，接下来我们来看显屏可视化窗口小于650px时，将页面的布局改成一列布局

- 页头：将页面头部的固定高度设置为自动(取消了原来的定高)

- searchform重新改变定位位置

- 主菜单的position重为static

- logo和网站口号也将position改回static

- 主内容的宽度设置为auto，并取消浮动

- sidebar的宽度设置为100%，并取消浮动

3.5 显屏可视化窗口小于480px（智能手机布局）

- HTML:禁用文字大小调整。默认情况之下，iPhone的文字大小是可以缩放的，我们可以在html加上一个“-webkit-text-size-adjust: none;”来禁止其缩放

- 主菜单的字体大小重置为90％

3.6 灵活的缩放图片

这里涉及到一个图片缩放的问题，也就是说图片也要能跟随你的显屏大小，成比例的缩放。那么实现这样的效果方法还是很简单的，你只要在你的img标签中加入

由于max-width在IE的某些版本中无法识别，为了兼容这些浏览器，可以考虑这样使用

3.7 灵活的嵌入式视频

为了使嵌入式的视频灵活，我们也可以根据上面的方法来使用，但对于embed元素在safari下的不支持max-width属性，那么我们可以改用下面的方法来替代

注意：

可适应图片

为了让你的图片也能随着显屏大小改变其显示比例，不至于破坏你的布局，你需要给图片应用上可缩放的代码