响应式网页设计简史

网站并不总是像今天这样适应性强。对于现代设计师来说，“响应性”是优秀设计最重要的定义因素之一。毕竟，我们现在正在迎合大量用户，他们经常在具有不同屏幕尺寸的移动设备和桌面设备之间切换。 

然而，向响应式设计的转变并不是一夜之间发生的。多年来，我们一直在调整“响应式网页设计”的概念，最终达到我们今天所处的阶段。 

今天，我们将仔细研究响应式网页设计的历史。

网页设计从哪里开始？

最初创建第一个网站时，没有人担心跨各种屏幕的响应性。所有网站的设计都是为了适应相同的模板，开发人员没有在设计、布局和排版等概念上花费大量时间。  

即使当 CSS 技术开始被广泛采用时，大多数开发人员也不必担心如何让内容适应不同的屏幕尺寸。然而，他们仍然找到了一些方法来处理不同的显示器和浏览器尺寸。

液体布局

早期开发人员可用 的两个主要布局选项是固定宽度或流动布局。

对于固定宽度的布局，如果您的显示器的分辨率与网站设计时的分辨率不完全相同，则设计更有可能被破坏。你可以在这里看到一个例子。 

或者，由 Glenn Davis 创造的流式 布局被认为是响应式网页设计的第一个革命性例子。

流动布局可以适应不同的显示器分辨率和浏览器尺寸。但是，内容也可能溢出，并且文本会经常在较小的屏幕上中断。 

分辨率相关的布局

2004 年，Cameron Adams 的一篇博客文章介绍了一种使用 JavaScript 根据浏览器窗口大小交换样式表的新方法。这种技术被称为“分辨率相关布局”。尽管他们需要开发人员进行更多工作，但依赖于分辨率的布局允许对网站设计进行更细粒度的控制。 

依赖于分辨率的布局基本上是作为 CSS 断点的早期版本，在它们出现之前。缺点是开发人员必须为每个目标分辨率创建不同的样式表，并确保 JavaScript 在所有浏览器中都能正常工作。

当时有这么多浏览器需要考虑，jQuery 作为一种抽象浏览器选项之间差异的方法变得越来越流行。

移动子域的兴起

与分辨率相关的设计等概念的引入几乎是在许多移动设备变得更加支持互联网的同时发生的。公司正在为他们的智能手机创建浏览器，而开发人员突然也需要考虑这些问题。

尽管移动子域旨在为用户提供与智能手机桌面站点完全相同的功能，但它们是完全独立的应用程序。 

拥有一个移动子域虽然很复杂，但确实有一些好处，例如允许开发人员将 SEO 专门定位到移动设备，并为移动网站变体带来更多流量。然而，与此同时，开发人员需要管理同一网站的两个变体。

早在 Apple 刚刚推出其第一款 iPad 的时候，无数的网页设计师仍然依赖于这种老式且笨重的策略来实现在每台设备上访问网站。在 2000 年代后期，开发人员通常依靠一些技巧来使移动网站更易于访问。例如，即使是简单的布局也使用 max-width: 100% 技巧来制作灵活的图像。

幸运的是，当 Ethan Marcotte在 A List Apart 上创造了“响应式网页设计”一词时，一切都开始改变了。本文提请注意 John Allsopp 对 Web 设计架构原则的探索，并为能够在任何设备上执行同样出色的一体化网站铺平了道路。 

响应式网页设计的新时代

Marcotte 的文章介绍了开发人员在创建响应式网站时需要考虑的三个关键组件：流体网格、媒体查询和灵活的图像。 

流体网格

流体网格的概念介绍了网站应该能够采用各种灵活的列，这些列根据当前屏幕的大小而增长或缩小。 

在移动设备上，这意味着引入一两个灵活的内容栏，而桌面设备通常可以显示更多栏（因为空间更大）。 

灵活的图像

灵活的图像引入了这样的想法，即与内容一样，图像应该能够沿着它们所在的流体网格增长或缩小。如上所述，之前，开发人员使用了一种称为“最大宽度”的技巧来实现这一点。 

如果您将图像保存在容器中，那么它很容易溢出，尤其是在容器响应时。但是，如果您将“最大宽度”设置为 100%，则图像只会随其父容器调整大小。 

媒体查询

“媒体查询”的概念是指 CSS 媒体查询，于 2010 年推出，但直到 2 年后正式作为 W3 推荐发布才被广泛采用。媒体查询本质上是基于媒体类型（打印、屏幕等）和媒体特征（高度、宽度等）等选项触发的 CSS 规则。 

尽管当时它们更简单，但这些查询允许开发人员从本质上实现一种简单的断点——当今响应式设计中使用的那种工具。断点是指网站何时根据浏览器窗口或设备宽度更改其布局或样式。

在大多数情况下都需要使用视口元标记来确保媒体查询以当今开发人员所期望的方式工作。 

移动优先设计的兴起

自从 Marcotte 引入响应式 Web 设计以来，开发人员一直在研究尽可能有效地实现该想法的新方法。大多数开发人员现在分为两类，根据他们是首先考虑桌面设备用户的需求，还是移动设备用户的需求。趋势越来越向后者加速。 

在移动优先浏览时代从头开始设计网站时，大多数开发人员认为移动优先是最佳选择。移动设计通常更简单、更简约，这与当前网页设计的许多趋势相匹配。

采取移动优先路线意味着首先从移动角度评估网站的需求。一旦开始创建桌面和平板电脑布局，您就可以正常编写样式，使用断点。或者，如果您采用桌面优先的方法，您将需要通过您的断点选择不断调整它以适应较小的设备。

探索响应式网页设计的未来

响应式网页设计仍然不完美。有无数的网站仍然无法在所有设备上提供同样令人难以置信的体验。更重要的是，新的挑战不断出现，比如弄清楚如何为 AR 耳机和智能手表等新设备进行设计。 

然而，公平地说，自网页设计的早期以来，我们已经取得了长足的进步。 

Pexels精选图片。

丽贝卡卡特

Rebekah Carter 是一位敬业的自由撰稿人，与众多科技初创公司、品牌公司和营销团队密切合作。Rebekah 是一名顾问、公关专家和敬业的作家，专门为不断发展的技术和推广世界制作内容。丽贝卡·卡特的更多文章

来源：https://www.webdesignerdepot.com/2022/06/a-brief-history-of-responsive-web-design/