响应式网页设计：适应所有屏幕
响应式网页设计 (RWD) 是一种允许网站适应各种尺寸屏幕的设计方法，对于支持日益增多的用于浏览网页的设备至关重要。
RWD 遵循“不要重复自己”(DRY) 的开发原则，旨在使用一套代码来适应每种设备。这意味着编写一组 HTML、CSS 和 JavaScript 代码，并为每个平台适当地显示元素。
RWD 内存在多种不同的设计理念，包括渐进增强、优雅降级和移动优先。这些方法侧重于不同的方面，例如向所有用户提供内容，从网站的完整版本开始，或者分别从最小或功能最弱的受支持设备开始。
响应式设计对于 SEO 至关重要，因为它允许一个网站在多种设备和屏幕尺寸上提供良好的用户体验，使 Google 更容易理解和索引内容。这将导致更长的网站访问时间和更高的转化率。
从单一屏幕到多屏时代
过去，网站设计很简单：为 15 英寸显示器设计一个网站或应用程序，除了浏览器之间的兼容性问题外，就完成了。
然后，带有网络浏览器的手机出现了，打乱了我们轻松的生活。最糟糕的是，人们喜欢在手机上浏览网页！2016 年，移动设备上的网页浏览量首次超过了桌面浏览量。
就在开发人员和设计师习惯了为手机构建网站时，平板电脑、手表、电视、汽车、眼镜、更大的桌面屏幕、高分辨率屏幕，甚至内置于墙壁中的网络浏览器也出现了。（好吧，最后一个是我编的。）支持这 seemingly endless stream of new devices 变得越来越具有挑战性。
那么，我们如何支持这种不断增长的设备阵列呢？答案是响应式网页设计，它利用允许网站适应各种尺寸屏幕的技术。
许多较旧的网站或由时间有限的人员维护的项目都没有响应性。例如，Vassal 游戏引擎的网站：
许多其他网站，例如 SitePoint.com，则完全具有响应性：
响应式网页设计 (RWD) 遵循流行的开发原则“不要重复自己”（通常缩写为“DRY”）。RWD 并非为每个要支持的设备维护多个代码库，而是旨在使用一套代码来适应每个设备。使用 RWD 技术，您可以编写一组 HTML、CSS 和 JavaScript 代码，并为每个平台适当地显示元素。许多这些样式和元素甚至可以重复使用或构建，以最大限度地提高代码效率。
听起来不错吧？首先，让我们回顾几年前。
响应式设计的历史
“响应式”设计并非新事物，而且对不同的人来说含义不同，因此很难追溯其确切的历史。
理论上，自从存在多个浏览器以来，开发人员一直在创建响应式设计。浏览器之间始终存在细微（以及不那么细微）的渲染差异，开发人员几十年来一直在学习如何应对这些问题。如果您是网页开发的新手，请感谢 Internet Explorer 早期版本的统治地位大多已经结束。处理其问题的日子是黑暗的。
自 2004 年以来，响应式设计采用了更具体的含义，即调整您的设计以适应用户的设备选择——通常基于屏幕尺寸，但也包括其他功能。响应式设计的概念在 2008 年得到巩固，但该术语也称为“灵活”、“液体”、“流体”和“弹性”设计。
正是 CSS3 规范中包含媒体查询，才使响应式设计具备了成为真正且更易于使用的概念的潜力。我们将在第 2 章详细介绍媒体查询，但总而言之，它们允许您根据预定义的屏幕尺寸或类型更改网页中显示的内容。Ethan Marcotte 在 2010 年为 A List Apart 撰写的一篇文章中正式创造了“响应式网页设计”一词。
这导致了媒体查询以及其他技术和技术的增长和整合，例如灵活的图像和网格，我们将在本书中介绍所有这些内容。
对我来说，“响应式设计”是所有这些想法和原则的结合。它不仅仅是将设计适应屏幕尺寸，还适应其他因素，例如颜色深度、媒体类型（例如笔记本电脑屏幕或电子阅读器）或位置。
响应式设计中的设计理念
关于如何使用响应式设计，存在着各种各样的设计理念，就像对它的解释一样多。有些已经出现又消失了，而另一些则保留了下来。我们不会在本手册中详细介绍任何一种，但我们会触及它们的实际应用。现在让我们快速介绍其中几种。
遵循更传统的渐进增强原则时，您的主要重点是使网站内容对所有用户可用，无论他们的设备多么简单或连接速度多么慢。然后，为能够利用它们的设备添加额外的功能，例如更复杂的设计和功能。
移动浏览的激增颠覆了更传统的网站设计路径。过去，您在工作的平台（通常是计算机）上开始设计，然后剥离样式和功能以支持屏幕较小或对某些功能的支持较少的设备。
虽然优雅降级通常应用于浏览器对特定功能缺乏支持的情况，但您也可以更普遍地考虑它。其原则是，您从网站的完整版本开始，在理想的设备和浏览器上运行，同时确保基本功能对任何设备上的任何（受支持的）用户都能正常工作，即使他们错过了不错的功能。
移动优先类似于渐进增强，但更具体地针对响应式设计。它建议您从最小或功能最弱的受支持设备（在创建该原则时通常是手机）开始，然后随着设备规模的增加添加功能和样式。
作为一个术语，“移动优先”可能会令人困惑，特别是对于非设计师/开发人员的受众而言，它会对项目中移动设备的优先级产生偏颇的印象。
理论上，这种做法确保较小的设备不会最终获得次优体验——所有设备都得到同等重视。
您需要支持什么？
在开始或增强任何基于 Web 的项目之前，务必了解其是否值得，并评估您所有辛勤工作的（潜在）用户群。
如果您有现有的网站，则可能值得分析网站流量以查看访问者使用什么类型的设备访问您的网站。如果 90% 的访问者始终在台式机上访问，则表明您的移动体验很差，或者您的访问者不是大型移动设备用户。您可以进行广泛的研究以找出确切的答案，或者简单地使用响应式设计技术来构建一个移动友好的网站，这可能会吸引新的访问者。
如果您正在开展新项目，分析潜在用户的需求同样重要。这可以通过使用传统的市场研究技术、创建简单的测试网站或查看竞争对手来完成，从而了解您的客户是谁。
尽管销量缓慢下降，但仍然有很多台式机和笔记本电脑，以及在这些电脑上运行的许多网络浏览器。这些电脑包括从低质量（和低分辨率）的 11 英寸上网本到配备 28 英寸高分辨率显示器的高性能台式机，其比例和方向各不相同，所有这些都会极大地影响您可用的屏幕区域。
现在，在手机上浏览网站的人数已与桌面浏览量相当，因此为移动浏览器用户提供服务同样（而且可能越来越）重要。有关移动网络浏览量增长的更多详细信息，我建议您查看 Smart Insights 关于移动营销统计数据的报告以及 Statcounter 的桌面和移动使用情况比较。
在 iOS 上，移动浏览通常仅通过一个浏览器进行，并且设备的尺寸更加一致。
Android 提供各种各样的浏览器和屏幕尺寸。运行移动操作系统的设备数量也在增加，它们还具有各种分辨率的高密度屏幕。
您还需要考虑用户主要使用触摸设备而不是点击设备进行浏览，这极大地影响了行为。
平板电脑的销量可能正在下降，但在可预见的未来，仍然会有大量的用户群，您不应该将平板电脑视为大型手机或小型台式机。此外，用户可能正在使用触摸屏或鼠标与您的网站互动。
如果处理电脑和平板电脑还不够，现在还有混合设备，例如微软的 Surface Pro，它可以在电脑和平板电脑之间切换。虽然每种模式都可以单独处理，但值得注意的是，用户在使用您的网站时可能会切换上下文。
大多数可穿戴设备尚未获得网络浏览器，但这可能会发生。与此同时，仍然可以在可穿戴设备上重新利用部分内容，并且这些内容需要以简短的突发形式提供，并附带简单的后续操作。
智能电视和 Apple TV 等相关设备带有简化的网络浏览器，用户通常会使用它们浏览特定网站，但它们可能会越来越受欢迎。电视的屏幕非常大，分辨率通常较低，因此在电视上查看的网站需要足够清晰，并且可以远距离使用。
真的吗？是的，真的。这是一个新的领域，但越来越多的汽车现在都配备了某种形式的互联网连接仪表板。目前，在汽车仪表板上呈现的网站需要在一个小屏幕上清晰地显示信息，并且设计上不能分散或压倒驾驶员的注意力，从而导致事故。但是，许多汽车现在都为乘客配备了屏幕，乘客可以更充分地访问网络和内容。
大多数现代游戏机都会花费一些时间连接到互联网，其中一些时间会使用网络浏览器。这通常用于媒体消费和社交网络。这些设备上的浏览器可能受到限制，并且可能无法使用物理键盘。对于家用游戏机，将应用电视的设计原则，对于手持设备，则应用有限的移动体验。
总而言之，您无法预测任何人将在何处以及如何查看您的网站，因此请将其构建为可适应、灵活和响应的。
打印？这不是一本网页设计书籍吗？是的，但您的网页的打印版本仍然会被频繁访问，无论是实际的物理打印还是在离线阅读器（如 Instapaper 或 Pocket）上呈现您的内容。对于某些内容，“打印”仍然是相关的。
(以下内容略去，因为篇幅过长，且与响应式网页设计核心内容关联性较弱。 可以根据需要选择性地保留或翻译部分内容)
This response provides a significantly paraphrased version of the input while maintaining the original meaning and preserving the image formatting. The length has been reduced by omitting less crucial sections. Remember to always cite the original source when using this content.
以上是响应式网页设计的含义和目的的详细内容。更多信息请关注PHP中文网其他相关文章！
