响应式Web设计HTML5和CSS3实战.docx

—endofheader-->

当要专门强调代码块中的某一部分时，则对相关行或条目使用粗体格式：

[编者注：

网页格式无法实现此效果。

]

#wrapper{margin-right:

auto;margin-left:

auto;width:

96%;/*最外围的DIV*/

}

#header{margin-right:

10px;margin-left:

10px;width:

97.9166667%;/*940÷960*/}

新术语，以及重要词汇也使用粗体。

文中提到的那些菜单、对话框中的文字，会使用粗体或大写来标注，如：

“导航按钮不再做背景色切换，内容区的THESESHOULDHAVEWON按钮和侧边栏的详细信息按钮消失了，而字体也与设计文档相差甚远。

”

！

这个图标表示警告或重要提醒。

￥这个图标表示提示或技巧。

读者反馈

我们时刻欢迎你的反馈，以便了解你对本书的看法。

你的宝贵意见有助于我们提升书籍的质量。

一般的阅读反馈，可直接发送电子邮件至feedback@，请在邮件标题中注明书名。

如果你在某个领域内有专长且有兴趣编写相关书籍，请访问

客户支持

现在你已是Packt图书的尊贵读者了，我们有一系列的售后支持，保证你的消费物有所值。

错误

尽管我们已经对书籍作了仔细校对以保证内容准确，但错误在所难免。

如果在书中发现任何的文字或代码错误，非常欢迎你将这些错误提交给我们，这样可以帮助我们在后续版本中改正错误，避免其他读者产生不必要的误解。

一旦发现错误，请登录submissionform（提交勘误）链接，然后填写具体的错误信息即可。

只要你提交的勘误通过验证，勘误信息就会上传到我们的网站，或者追加到已有勘误列表中，显示在该书的勘误页面。

盗版

对所有媒体来说，互联网盗版都是一个棘手的问题。

Packt很重视版权保护。

如果你在互联网上发现我们公司出版物的任何非法复制品，请及时告知我们相关网址或网站名称，以便我们采取补救措施。

如果发现可疑盗版材料，请通过copyright@联系我们。

对您帮助我们保护作者权益、确保我们持续提供高品质图书的行为表示敬意。

问题

如果你对本书有任何问题，请联系questions@，我们会尽力解决。

第1章HTML5、CSS3和响应式网页设计入门

直到最近，网站设计普遍还在使用固定宽度（如960像素），以期给所有终端用户带来较为一致的浏览体验。

这种固定宽度设计在笔记本电脑上显示刚刚好，而在高分辨率显示器上却会在两边多出些空白。

但现在有了智能手机。

苹果公司的iPhone第一次带给我们真正意义上易用的手机上网体验，之后其他公司纷纷效仿。

现在人们可以舒服地使用手机上网冲浪，不用再像过去那样需要有“挑圆片”[1]世界冠军一样的灵活拇指，才能在小屏幕上看看网页。

此外，消费者在家中上网时优先使用小屏幕设备（如平板电脑、上网本）正成为趋势。

一个不争的事实是，使用小屏幕设备上网的人数正在以前所未有的速度增长。

与此同时，27英寸和30英寸的大显示器也在快速普及。

上网设备之间的尺寸差距与日俱增。

[1]一种游戏，http:

//en.wikipedia.org/wiki/Tiddlywinks。

——译者注

幸运的是，面对不断发展的浏览器和上网设备，我们有可行的解决方案。

采用HTML5和CSS3技术的响应式网页设计，可以使网站兼容多种设备和屏幕。

而这种方法的最佳之处，在于不需要什么服务器端方案，也完全可以实现。

本章内容：

∙支持小屏幕设备的重要性

∙什么是移动网站设计

∙什么是响应式网页设计

∙优秀响应式网页实例赏析

∙视口和屏幕的区别

∙安装和使用修改视口的浏览器扩展程序

∙使用HTML5编写更简洁的标记

∙使用CSS3解决常见的设计问题

1.1为什么智能手机很重要（而老版的IE不再重要）

虽然统计数据一般仅用作粗略参考，但来自的统计数据却值得注意。

从2010年7月到2011年7月的12个月中，全球手机浏览器的使用量从2.86%上涨至7.02%。

InternetExplorer6的使用率则是从8.79%下降到3.42%。

到2011年7月，InternetExplorer7的使用率也降到了5.45%。

如果客户老是要求：

“我们的网站必须兼容IE6和IE7！

”你可以反驳说：

“我们应该把精力花在更有价值的地方。

”用手机上网的人比用台式机和笔记本中的IE6或IE7上网的人多多了。

你可以听到全球前端开发工程师震耳欲聋的欢呼声！

越来越多的人使用小屏幕设备上网，这些设备上的浏览器在设计时都考虑到了如何显示好现有网站。

手机浏览器会将一个标准网页缩小至与设备可视区域（标准技术术语叫做“视口”）恰好匹配。

然后用户在自己感兴趣的内容区域上放大浏览。

这样看起来已经挺好了，那作为前端设计师和工程师的我们，为什么还要在这上面继续优化呢？

在iPhone或Android手机上浏览的网页越多（如上图所示的那样），就越能深刻体会到为什么我们还需要继续优化。

为了看清楚页面内容，需要不停地放大、缩小页面，然后为了看到视口外的文字，再左、右拖动，结果一不小心点了一个链接，你说讨厌不讨厌？

我们当然可以做得更好！

1.2响应式设计一定是最佳选择吗

如果预算充足且形势需要，