响应式网页设计简史
网页设计从何而来？
第一个网站刚创建时，没有人担心屏幕范围的响应能力。所有网站都针对相同的模板进行了设计，开发人员没有花太多时间在设计、布局和排版等概念上。即使 CSS 技术开始广泛采用，大多数开发人员也不必担心将内容应用于不同的屏幕大小。但是，他们仍然找到了一些使用不同显示器和浏览器大小的方法。
流畅的布局
开发人员最初可以使用的两个主要布局选项是固定宽度或浮动布局。使用固定宽度布局时，如果监视器的分辨率与网站设计的分辨率不同，则设计更有可能被打破。您可以在此处看到示例。或者，Glenn Davis 创建的流畅布局被认为是响应式 Web 设计的首批创新案例之一。流畅的布局可以适应不同的显示器分辨率和浏览器大小。但是，内容可能会溢出，文本在小屏幕上经常被打破。
分辨率相关布局
2004 年，Cameron Adams 的一篇博文介绍了一种使用 JavaScript 根据浏览器窗口大小替换样式表的新方法。该技术被称为“分辨率相关布局”。开发人员需要做更多的工作，但依赖于分辨率的布局使您能够更好地控制网站设计。默认情况下，依赖于分辨率的布局是 CSS 断点的早期版本。缺点是开发人员必须为每个目标分辨率创建不同的样式表，并确保 JavaScript 适用于所有浏览器。由于当时有太多的浏览器需要考虑，jQuery 越来越受欢迎，因为它抽象了浏览器选项之间的差异。
移动设备的兴起
当许多移动设备越来越多地使用互联网时，诸如分辨率依赖设计等概念的引入几乎同时发生。该公司正在为智能手机创建浏览器，开发人员突然不得不考虑这些浏览器。移动子域旨在为用户提供与智能手机桌面网站相同的功能，但它是完全不同的应用程序。移动子域很复杂，但有几个好处，例如开发人员可以将 SEO 专门定位到移动设备，并通过移动网站变体吸引更多流量。但与此同时，开发人员必须管理同一网站的两种变体。当苹果推出其首款iPad时，许多网页设计师仍然依赖这种过时的粗俗策略，允许他们从任何设备访问网站。在 21 世纪后期，开发人员经常依靠多种技巧来使移动网站更易于访问。例如，我们使用 max-width：100% 技巧来实现灵活的图像，即使在简单的布局中也是如此。幸运的是，随着埃森&马科特在《生命公寓》中创建响应式网页设计一词，一切都开始改变。本文注意到了 John Allsopp 对 Web 设计体系结构原则的探索，并为一体化网站奠定了基础，该网站可以在任何设备上很好地工作。
响应式网页设计的新时代
在 Marcotte 的文章中，我们介绍了开发人员在创建响应式网站时需要考虑的三个重要组件：流畅的网格、媒体查询和灵活的图像。
浮动网格
流畅网格的概念引入了一个想法，即网站应该能够采用各种灵活的列，这些列根据当前屏幕大小而拉伸或缩小。在移动设备上，这意味着引入一个或两个灵活的内容列，而桌面设备通常可以显示更多列，因为空间更大。
灵活的图像（弹性图像）
与内容一样，灵活的图像也引入了能够沿图像所在的流动网格增大或缩小的想法。如上所述，开发人员使用了最大宽度技巧来实现这一点。如果将图像保存在容器中，则很容易溢出，尤其是在容器响应迅速的情况下。但是，如果将最大宽度设置为 100%，则图像将随父容器一起调整大小。
媒体查询
媒体查询的概念是 CSS 媒体查询，该查询于 2010 年推出，但在两年后作为 W3 建议正式发布之前尚未得到广泛采用。媒体查询本质上是基于媒体类型（打印、屏幕等）和媒体功能（照明、width 等）等选项触发的 CSS 规则。虽然当时更简单，但这些查询使开发人员能够实现一种简单的分界点，本质上是当今响应式设计中使用的工具。分隔符指示网站是否根据浏览器窗口或设备宽度更改布局或样式。为了确保媒体查询按照当今开发人员的期望工作，在大多数情况下，必须使用视口元标记。
移动优先设计的兴起
自 Marcotte 引入响应式 Web 设计以来，开发人员一直在研究尽可能有效地实施想法的新方法。大多数开发人员现在分为两类：首先考虑桌面设备用户的需求还是首先考虑移动设备用户的需求。这种趋势正在加速向后者发展。在移动优先浏览时代，从零开始设计网站时，大多数开发人员认为移动优先是最好的选择。移动设计通常更简单、更简约，与当前 Web 设计的许多趋势保持一致。走移动优先路径意味着首先从移动角度评估网站的需求。开始创建桌面和平板电脑布局时，可以使用断点正常创建样式。或者，如果选择桌面优先方法，则断点选择应持续应用于较小的设备。
探索响应式网页设计的未来
响应式网页设计还不完善。仍然有许多网站无法在所有设备上提供相同的惊人体验。此外，为 AR 耳机和智能手表等新设备寻找设计方法的新挑战不断涌现。但是，我们可以说，从网页设计的早期开始，我们已经走过了漫长的道路。