CSS3 的 Media Queries

在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据：

1. 浏览器窗口的宽和高
2. 设备的宽和高
3. 设备的手持方向，横向还是竖向
4. 分辨率

如果用户有一个支持 Media Queries 的设备，我们就可以为该设备编写专门的 CSS，让网站适应这个设备的小屏幕，英国的 Web 技术大会 dConstruct 便基于该技术推出他们的 2010 年大会网站，手机也可以轻松访问，以下是该网站的桌面版和手机版截图：

Full Stie版本

手机版本

这个网站在不同尺寸的设备上按不同的布局显示，并且，手机版在 iPhone，Opera Mini， Android 等设备上有完全一致的表现。

使用 Media Queries 为手机创建单独的 CSS

我们举一个简单的两栏式结构的例子。

两栏布局

为了让这个布局更好地在手机上显示，我们为手机版设计一个一栏式布局，且缩小 header 部分的图片大小。

使用 Media Queries 最直接的方法是，在你的 CSS 代码中，加一段独立代码分支，如下：

接着，在这个分支中，为小屏幕编写独立的 CSS 定义，这些定义可以覆盖桌面版 CSS 中的相应定义（只要将这段分支代码放在后面），以下针对小屏幕的 CSS 将布局变成一栏式，且使用了小尺寸的 Header 图片：

最终，我们在小屏幕设备上得到了如下显示效果：

手机显示效果

使用 Media Queries 链接单独的 CSS 文件

对于小型的改动，直接在 CSS 代码中插入移动设备代码分支是很方便的，但对于大型站点，可以使用 Media Queries 链接独立的式样表文件，以便在独立的式样表文件中完全自由地为小设备编写 CSS 代码，方法如下：

测试 Media Queries

要在不同设备上测试 Media Queries 并非易事，你要有各种设备，还要将代码上传到某个主机进行访问测试。这里有一个在线服务，ProtoFluid，该服务允许你提供你要测试的网站的 URL，或者你本机上的 URL，然后，模拟 iPhone 等移动设备显示你的设计，下图是上文中提到的 dConstruct 网站在 ProtoFluid 的 iPhone 模拟中显示的样子。你也可以填写你自己的窗口尺寸，来模拟特定的设备。

ProtoFluid模拟测试

在 ProtoFluid 使用 Media Queries，你需要同时加上 max-width 和 max-device-width 属性，这意味着，Media Queires 不仅可以针对不同的移动设备，还可以针对桌面系统中某些人为的小窗口情形。

使用上面的代码，在桌面浏览器上，当你改变窗口尺寸到达 480 像素的时候，就会看到布局的改变。需要注意的是，上面的 max-width 部分仅仅为了测试，如果你不希望用户在桌面浏览器中因为改变了窗口大小而导致你的布局改变，可以去掉 max-width 部分，而只针对那些移动设备。

对现有网站的整改

上面的例子为了说明问题起见都很简单，现实中的站点不可能这样，下面的例子，作者将使用他自己的公司网站，说明如何使用 Media Queries 对现有网站进行移动化整改。

桌面布局

作者自己的网站是几年前设计的，那是还没有考虑 Media Queries 问题，这是一个三栏式布局。

三栏布局

加新的式样表

为了适应移动设备，将使用 Media Queries 加载独立的式样表：

作者的做法是，将他站点中原来的 CSS 文件另存为 small-device.css ，在这个基础上针对移动设备进行整改。

压缩 Header 部分

第一步是让 Logo 部分能在小屏幕上显示，因为这个 Logo 是基于背景图片的，因此很好办，同时，提供一个小尺寸的背景图，以便和 Logo 搭配。

单列式布局

下一步主要的工作是将多栏式布局换成单栏式，桌面版使用 Float 实现多栏布局，要改成单栏，只需将 float 设置为 float:none，并将 width 设置为 width:auto，这样，就实现了单列式布局。

再紧凑一些

然后，将margin 和 padding 进行调整，使之更紧凑一些：

测试效果

在 iPhone 中测试

在 iPhone 中实际测试的时候，发现网站在单列式布局中仍然向外延伸了，从 Safari developer website 找到解决办法，在网站头，添加一个 meta tag，将网站的视窗宽度设置成何设备一致。

在iphone上测试

更多资源：

后移动时代的 Web 设计

A List Apart – Responsive Web Design （ALA – 反应灵敏的 Web 设计）

Apple – Safari Web Content Guide （Apple – Safari Web 内容指引）

Sitepoint CSS Reference – Media Queries （SitePoint 的 CSS 参考手册 – Media Queries）

Targeting the iPhone 4 Retina Display with CSS3 Media Queries （使用 CSS3 Media Queries 实现面向 iPhone 4 高精细显示屏的设计）

Aral Balkan: How to make your web content look stunning on the iPhone 4’s new Retina Display（Aral Balkan：如何让你的 Web 内容在 iPhone 4 的高精细屏上更好地显示）

Stuff and Nonsense: Proportional leading with CSS3 Media Queries （使用 CSS3 Media Queries 实现按比例行间距）

Matthew James Taylor: iPad layout with landscape and portrait modes （iPad 的水平和垂直布局模式）

在旧浏览器上支持 Media Queries

如果你面向的访问者是 iPhone， Opera Mini 等移动设备，这没有问题，对于那些不支持 Media Queries 的浏览器（像 IE6/7/8），以下文章或许对你有帮助。

Media Queries section on When Can I Use, showing which browsers have support （Media Queries 的浏览器支持情况）

Media Queries jQuery plugin (only deals with max/min width) （Media Queries jQuery 插件）

css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers（在不支持 Media Queries 的浏览器中实现对 Media Queries 的支持）

更多示例

Jon Hicks 在 Hicksdesign 基于 Media Queries 实现了非常好的浏览体验，不仅针对移动设备，还面向那些拥有小屏幕的桌面系统。另外，还可以看看 Simon Collison’s website 以及 Ed Merritt’s portfolio 这些网站中对这种技术的运用。

本文作者

Rachel Andrew

Rachel Andrew

Rachel Andrew 是一名 Web 前端设计师与后端开发者，是一家英国 Web 开发顾问公司 edgeofmyseat.com 的主管，她还是一款小型 CMS 系统 Perch 的设计者。她写过多本 Web 开发与设计相关的书，包括由 SitePoint 出版的 CSS Anthology: 101 Essential Tips, Tricks and Hacks，她的个人博客是 rachelandrew.co.uk。

本文国际来源：Smashing Magazine How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

移动web：是指可以用移动设备访问的WWW内容、应用和服务。

很明显，移动web应该包含了WAP。所以，我把能用移动设备访问的网站或应用称为移动web。

移动web是客户端技术，如果要开发移动网站，自然我们需要选择一款合适的标准语言。主要技术标准有：

1. WML——古典的移动web标准，使用WML
2. i-mode——小日本的标准，使用iHTML，我们可以忽略
3. OMA领导的xHTML mobile profile，使用xHTML
4. W3C领导的xHTML Basic，使用xHTML
5. 以及所谓的Full Web，也就是普通的HTML——从iPhone开始流行起来

他们的演进如下：

移动web相关标记语言的演进

目前仍在演进的，就是有HTML, 和XML了（Flash Lite另外讨论）。

技术特点还是贴图直观一点，我用网易来举例：

网易wml版本

WML：代码紧凑，适合无线传输，被良好的支持，有许多移动特性。但是需要独立开发，实现样式困难。

网易xhtml版本

xHTML：适合无线传输，被广泛地支持，易于开发，易于界面设计，mobile profile有部分移动特性。

网易Full Web版本

Full Web：适合桌面习惯，丰富的表现，不过需要设备有大量内存和渲染能力，传输比较慢。

支持情况：

1. wml：可以接入互联网的手机都支持（除了iPhone），而MID和上网本默认情况下不支持。
2. xHTML mp：近代手机都支持，只要拥有256色以上的屏幕的手机是绝对支持的，MID和桌面电脑也支持。
3. xHTML Basic：近代手机都支持，如果支持到它的设备，mobile profile页面也能良好的渲染，MID和桌面电脑也支持。
4. Full Web：近几年的设备支持，一般是智能机和较主流的设备，例如操作系统是Symbian, Mac OS, windows, Android等的设备以及部分第三方浏览器如Opera, Fennec, Skyfire等等。

如果你有如下条件，使用wml：

1. 面向所有年代的手机都要有良好的兼容
2. 界面效果要求不高
3. 极小的数据传输
4. 额外的wml编写经验

如果你有如下条件，使用xHTML：

1. 面向近几年的移动设备和桌面设备
2. 需要良好的移动界面
3. 较小的移动数据传输带宽
4. 要求丰富的多媒体内容

如果你有如下条件，使用Full Web：

1. 面向高机能的智能设备
2. 没有时间开发移动版本的内容
3. 大量的带宽
4. 不要求移动特性

当然上面的条件只是概括，不代表必须这样做。还是要根据实际情况，决定使用合适的技术标准。

手机浏览器和基于web的模拟器不同，基于web的模拟器使用一种“虚拟的手持设备”在电脑上显示wap页面，使用java或者html转码器。这些模拟器有 Wapjag, TT, Waptiger 和 Superwap。

一下表格列出了一些当下非常流行的手机浏览器。一些手机浏览器是web浏览器的精简版本，因此一些手机浏览器厂商也提供用于台式机和笔记本电脑的浏览器。

被主流手机和PDA厂商使用的内置手机浏览器

关于浏览器类型，还有两个页面可供参考

1. 手机浏览器型号查询
2. ppk：手机类型和浏览器表格

一、用户界面测试

1. 网站配色方案
2. Logo文化
3. Icon图标规范

二、可访问性

1. 浏览器兼容性
2. 设备兼容性
3. 无图模式或者无样式模式
4. 客户端禁用js

三、代码测试

1. HTML Validator
2. Firebug
3. Yslow

四、人机交互测试

1. 眼动议
2. 黑盒测试
3. 谷歌AB测试

五、SEO测试

1. 代码级别
2. 搜索引擎
3. 外链内链
4. 软文推广

六、总结

文档下载：团客拉体验测试报告

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>000</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; color:#333;}
#list{font-family:Arial; list-style:none;}
#list li{float:left;margin-right:10px;}
</style>
</head>
<body>
<ul id="list"><li>12条留言</li><li>回复</li></ul>
</body>
</html>

IE下中英文混排bug

这个bug导致基线不一致，解决方法有如下几种：

修改字体为宋体，但是宋体的英文字体为衬线字体（Times New Roman即是英文中的衬线字，关于衬线字)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>000</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; color:#333;}
#list{font-family:"宋体"; list-style:none;}
#list li{float:left;margin-right:10px;}
</style>
</head>
<body>
<ul id="list"><li>12条留言</li><li>回复</li></ul>
</body>
</html>

为了更加美观，所以英文采用arial字体，中文使用宋体。可在<a>标签内注明 line-height:1.231,可解决行高不等以及字体与下划线粘连问题。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>000</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; color:#333;}
#list{font-family:Arial,"宋体";  list-style:none;}
#list li{float:left;margin-right:10px;line-height:1.231;}
</style>
</head>
<body>
<ul id="list"><li>12条留言</li><li>回复</li></ul>
</body>
</html>

杯具的事情还是发生了OP有和IE一样的bug而且用line-height解决不了，只能将字体设置为宋体解决问题。

参考文献：网页中英文混排行高不等问题的解决方案探讨

第一章讲的是javascript的灵活性，用四种不同的方法实现同一件事情。

1，最常用的方式，但是无法保存状态

/*开始和结束动画*/
function startAnimation(){
    ...
}
function stopAnimation(){
    ...
}

2，定一个类

/*定义类*/
var Anim = function(){
    ...
};
Anim.prototype.start = function (){
    ...
};
Anim.prototype.stop = function (){
    ...
};
/*实例化类*/
var myAnim = new Anim();
myAnim.start();
...
myAnim.stop();

3，把方法的定义封装到声明中

/*定义一个类，并把方法封装到声明中*/
var Anim = function(){
    ...
};
Anim.prototype = {
    start: function(){
        ...
    },
    stop: function(){
        ...
    }
};

4,定义一个专门添加方法的方法Function.prototype.method。它有两个参数，第一个参数是字符串，表示新方法的方法名；第二个是用作新方法的函数。

/*给Function添加一个用来加方法的method方法*/
Function.prototype.method = function(name, fn) {
    this.prototype[name] = fn;
};
/*定义一个类，用method方法为它添加新方法*/
var Anim = function(){
    ...
}
Anim.method('start', function(){
    ...
});
Anim.method('stop', function(){
    ...
});

当然，这种方法还能实现链式调用

/*给Function添加一个用来加方法的method方法*/
Function.prototype.method = function(name, fn) {
    this.prototype[name] = fn;
    return this;
};
/*定义一个类，用method方法为它添加新方法*/
var Anim = function(){
    ...
}
Anim.method('start', function(){
    ...
}).method('stop', function(){
    ...
});