《响应式Web设计》试读：前言

如果你想给自己的网站做一个单独的“手机版”，请三思而后行！响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提供最佳的浏览体验。 本书提供了一整套方法，用来将一个现有的固定宽度的网站设计变成响应式的。此外，本书应用HTML5和CSS3提供的最新最有用的技术，扩展了响应式网页设计的方法论，以便网站更简洁、更易于维护。本书还讲解了编写和发布代码、图片、文件的最佳实践。 只要你懂HTML和CSS，你就能制作响应式网站。 本书内容 第1章，HTML5、CSS3及响应式设计入门，定义了什么是响应式网页设计，展示了一些响应式设计的网站示例，重点强调了使用HTML5和CSS3的优势。 第2章，媒体查询：支持不同的视口，讲解了什么是媒体查询，如何实现媒体查询，以及如何针对设备能力匹配CSS样式，将其应用于任意设计。 第3章，拥抱流式布局，讲解了流式布局的优点，以及如何将一个现有的固定宽度设计轻松地转换为流式布局，怎样使用CSS框架快速搭建响应式网页。 第4章，响应式设计中的HTML5，探讨了使用HTML5技术的诸多好处，比如更简洁的代码、语义化标签、离线存储，以及无障碍网页应用辅助技术。 第5章，CSS3：选择器、字体和颜色模式，展示了CSS3选择器的强大威力，可以让你轻松地指定和改变任何元素。还讲解了通过@font-face声明来使用漂亮的网络字体，另外讲解了新的CSS3颜色模式如RGB(A)和HSL(A)。 第6章，用CSS3创造令人惊艳的美，展示了如何使用纯粹的CSS3代码实现文字阴影、盒阴影和渐变效果。还涵盖了如何使用多重背景图片，以及如何通过字体文件创建图标。 第7章，CSS3的过渡、变形和动画，讲解如何仅使用CSS3来创建和转换屏幕上的元素，并制作动画效果。 第8章，用HTML5和CSS3征服表单，阐述了在所有设备上（从最新的智能手机到桌面版浏览器）都能良好运行的跨浏览器表单开发技巧。 第9章，解决跨浏览器问题，讲解了如何保证老版本的Internet Explorer可响应，如何将一组链接修改成移动设备上的一个菜单，如何为高分辨率显示器提供不同内容，以及如何使用Modernizr框架分条件地加载资源文件。 准备工作 你必须对HTML和CSS很熟悉。有一点JavaScript基础会很有帮助。良好的电影品味也很有益处。 本书读者 你是否正在开发两套网站，一套给移动设备，一套给大显示器？又或者你已听说过“响应式网页设计”但却不确定如何将HTML5、CSS3和响应式设计融合在一起？如果是，那么本书可以让你在所有竞争对手之前，将你的网站提升到一个更高层次。 本书面向那些正在使用HTML 4.01和CSS 2.1开发固定宽度网站的网页设计师和开发人员，讲解了如何使用HTML5和CSS3制作可适应任意屏幕尺寸设备的响应式网站。 本书约定 本书中使用几种不同的文字样式来区分不同类型的信息，具体约定如下。 正文中的代码使用如下格式： “HTML5接受宽松语法，例如 〈sCRipt SrC=js/jquery-1.6.2.js〉〈/script〉 这样的语句也是有效的。” 代码段使用如下格式： 〈div class="header"〉 〈div class="navigation"〉 〈ul class="nav-list"〉 〈li〉〈a href="#" title="Home"〉Home〈/a〉〈/li〉 〈li〉〈a href="#" title="About"〉About〈/a〉〈/li〉 〈/ul〉 〈/div〉 〈!—end of navigation --〉 〈/div〉 〈!—end of header --〉 当要专门强调代码块中的某一部分时，则对相关行或条目使用粗体格式：[编者注：网页格式无法实现此效果。] #wrapper { margin-right: auto; margin-left: auto; width: 96%; /* 最外围的DIV */ } #header { margin-right: 10px; margin-left: 10px; width: 97.9166667%; /* 940 ÷ 960 */ } 新术语，以及重要词汇也使用粗体。文中提到的那些菜单、对话框中的文字，会使用粗体或大写来标注，如：“导航按钮不再做背景色切换，内容区的THESE SHOULD HAVE WON按钮和侧边栏的详细信息按钮消失了，而字体也与设计文档相差甚远。” 这个图标表示警告或重要提醒。 这个图标表示提示或技巧。 读者反馈 我们时刻欢迎你的反馈，以便了解你对本书的看法。你的宝贵意见有助于我们提升书籍的质量。 一般的阅读反馈，可直接发送电子邮件至feedback@packtpub.com，请在邮件标题中注明书名。 如果你在某个领域内有专长且有兴趣编写相关书籍，请访问www.packtpub.com/authors查看作者指南。 客户支持 现在你已是Packt图书的尊贵读者了，我们有一系列的售后支持，保证你的消费物有所值。 错误 尽管我们已经对书籍作了仔细校对以保证内容准确，但错误在所难免。如果在书中发现任何的文字或代码错误，非常欢迎你将这些错误提交给我们，这样可以帮助我们在后续版本中改正错误，避免其他读者产生不必要的误解。一旦发现错误，请登录http://www.packtpub.com/support，选择书名，点击errata submission form（提交勘误）链接，然后填写具体的错误信息即可。只要你提交的勘误通过验证，勘误信息就会上传到我们的网站，或者追加到已有勘误列表中，显示在该书的勘误页面 。 盗版 对所有媒体来说，互联网盗版都是一个棘手的问题。Packt很重视版权保护。如果你在互联网上发现我们公司出版物的任何非法复制品，请及时告知我们相关网址或网站名称，以便我们采取补救措施。 如果发现可疑盗版材料，请通过copyright@packtpub.com联系我们。对您帮助我们保护作者权益、确保我们持续提供高品质图书的行为表示敬意。 问题 如果你对本书有任何问题，请联系 questions@packtpub.com，我们会尽力解决。