《Web前端工程师修炼之道（原书第4版）》——自适应Web设计

本节书摘来自华章社区《Web前端工程师修炼之道（原书第4版）》一书中的自适应Web设计，作者Jennifer Niederst Robbins，更多章节内容可以访问云栖社区“华章社区”公众号查看

自适应Web设计
默认情况下，大多数的小型设备（如智能手机和平板电脑）上的浏览器可以缩小网页，使其适应屏幕大小，并提供放大页面、拖动浏览的机制。虽然如此，严格来讲，它不是一个良好的体验。在这些设备上，文字太小、阅读不便，链接太小、不好单击，而缩放和左右拖动浏览又增加了操作。
自适应Web设计的策略是根据设备上视窗的大小（浏览器窗口）来提供自定义布局。自适应Web设计的技巧是为所有的设备提供同一个HTML文档，但根据设备不同而应用不同的样式表，从而为不同设备提供最优化的布局。例如，当用智能手机查看页面时，内容只出现一列，并且将链接放大，以便于单击。但是当用桌面浏览器来浏览同样的页面时，内容重新排列为多列，并提供传统的导航元素。听起来就像个魔术！（但它实际上只是CSS。）
自从Ethan Marcotte在他的文章“自适应Web设计”中第一次创造了这个词汇后，Web设计社区就一直在热烈地讨论（Ethan Marcotte的这篇文章在2010年的A List Apart上www.alistapart.com/articles/responsive-web-design/。它已经成为应对未知视窗大小的主要工具之一。
图3-3显示了一些例子，表现了自适应网页在典型的桌面显示器、平板电脑、智能手机上的显示。在媒体查询库网站（mediaqueri.es），你可以看到许多更鼓舞人心的例子。你可以尝试打开浏览器，然后将窗口调整到很窄、很宽，可以看看随着窗口大小变化，网页布局的变化。

自适应Web设计有助于布局，但它并不能一劳永逸地应对所有移动Web设计的挑战。事实上，为用户和他们所选择的设备提供最好的体验需要的优化可能不只是调整外观和感觉。通过使用服务器来检测设备及其功能，然后作出决定发送什么可以更好地解决一些问题。通过逐步提高，你可以为大多数的浏览器和设备提供一个基本的体验，对于更好的设备，可以发送增强的选项。
对于一些站点和服务，为移动设备单独建立一个站点（见侧栏“移动专用网站”）是一个更好的选择，单独建立的站点可以有专门的界面和功能，并可以充分利用手机的功能，如地理位置等。这就是说，虽然自适应设计不会解决一切问题，但是如果要为大多数浏览器提供令人满意的体验，它是一个不可或缺的组成部分。