响应式 Web 设计简史
一个网站就像是一块画布，你可以随心所欲地进行 Web 设计。但是，Web 设计和绘画不一样的地方在于，不是所有人都会如你所想地理解你的网站。
互联网既庞大又古老，设备却越来越小，越来越精巧。现在，你必须在不影响作品美感的前提下调整它的大小，以适应更小的画布。
这就是响应式设计的用武之地。现在，我们在 PC 端和手机端浏览很多网站的体验都很好，但并不是一开始就是这样的，开发人员通过多年试验才达到这一点，而且我们仍在每天改进。
在本文中，我们将深入探讨响应式 Web 设计的历史，了解网站开发是如何随着时间发展的。
互联网早期
还记得互联网早期所有网站看起来都很棒吗？仅在网络上发布自己的页面就已经是一项巨大的成就了。即使只是用 Geocities 或 Angelfire 这些最早的建站服务做的页面，你可以将其展示给朋友，那简直是世界上最棒的事情之一。
那时候设计师的工作比较简单：人们只能通过台式计算机上网，设备的分辨率和宽高比就那么几种，所以设计师可以在一个屏幕上任意布局，而不必太担心其他屏幕的尺寸。
Yahoo 2001 年的主页
那时，网站常常强迫用户使用桌面浏览器。重新设计整个网站以适应一些不常见尺寸的设备是一项艰巨的任务，许多公司都不愿意花这个精力。
CSS 出现之前
在过去的 20 年左右的时间里，大多数开发人员都从 Web 开发入门编程，也就是说他们要学习 HTML 这一构建网站的基本要素。
用最基本的术语来说，HTML 元素是在默认情况下彼此堆叠的矩形框。通过几个装有文本和图像的盒子，你能实现简单的效果。
那时候我们可以使用的 HTML 标签很少，包括 h1 - h6 标签，图像标签，列表，表格，段落等等基本的标签（现在可能使用 CSS 替代了）。
以下是一个最基本的 HTML 页面：
<html>
<head>
<title>FreeCodeCamp</title>
</head>
<body>
<h1>FreeCodeCamp</h1>
<img src="logo.jpg" height="150" width="150" align="right">
<p>Text goes here</p>
<p>Text goes here</p>
</body>
</html>
一个基本的 HTML 网页
那时候没有结构化或统一的方式布局 HTML，但是好在 HTML 通过特殊标签提供了一些自定义功能。
所有这些标记甚至沿用到今天，虽然其中一些因为太基础已经在 HTML5 中被弃用。例如，有一个 <marquee> 标记，用于创建滚动的文本、图像和其他 HTML 元素。
现在，仅通过 CSS 就可以达到相同的效果。但是那时，开发人员必须为每个功能创建单独的标签。（有趣的事实：如果你搜索 “marquee 标签”，会看到 Google 制作的一个复活节彩蛋。）因此，设计人员需要一种结构化的布局元素的方式，需要是灵活的且完全可定制。
所以，级联样式表（Cascading Style Sheets，CSS）出现了，这是对 HTML 元素布局的一种标准。
级联样式表或 CSS 是一种布局任何 HTML 元素的方式。CSS 有一组预定义属性，可以应用于任何 HTML 元素。这些样式可以直接嵌入在一个 HTML 页面中，也可以用作外部 .css 文件。
这是网页设计的一个重要里程碑。现在，设计人员可以选择更改 HTML 元素的每个属性，并将它们放置在所需的位置。
当屏幕开始缩放
到这里，设计人员已经可以完全控制网页了，他们需要确保一个网页在不同尺寸的屏幕上均显示良好。
桌面端今天仍然很流行，但是大多数人是使用手持移动设备上网。现在，设计人员要处理的宽度减小了，但高度却变得更高，因为与桌面端相比，触摸屏设备上滚动显示页面非常方便。
网站必须考虑响应式 Web 设计了。
响应式 Web 设计是一种网页设计方法，可使网页在各种设备以及窗口或屏幕尺寸上都能很好地呈现。
对于较小屏幕的处理，最常见的方法是侧边栏。边栏就像一个抽屉，其中保留了链接和其他不太重要的内容。设计人员只需将所有辅助内容放到侧边栏，使网页看起来干净。但其实侧边栏最初并不是为此目的而设计的。
在此之前，<frameset> 和 <frame> 标签非常流行，因为它们允许设计人员嵌入外部网页。但是，与现在流行的 <iframe> 标签不同，这些标签反应迟钝，因为它们无法适应不同的屏幕尺寸，即使在较小屏幕上也是保持原布局，看起来很糟糕。
<frameset rows="100,*">
<frame src="header.html"/>
<frameset cols="33%,33%,*">Nested frameset
<frame src="subframe1.html"/>
<frame src="subframe2.html"/>
<frame src="subframe3.html"/>
</frameset>
</frameset>
在桌面端，输出看起来完全正常，但在移动设备上却不行。
framesets 在桌面端和移动端的显示
向响应式设计过渡
那些陈旧的、庞大的、包含成千上万个页面的网站面临着一个难题：响应还是不响应。
网页设计师们都知道：从较大屏幕切换到较小屏幕挺麻烦的——画布变小，而画作要保持不变，要么需要删除画作的某些部分，要么使其适应。
由于那时候没有关于响应设计的指导准则，设计师通常采用一种幼稚的方式，将元素放置在屏幕的各个部分。
例如，使用 <table> 标签。
从很多方面来说，使用 <table> 标签进行布局不是一种好的做法，例如：
表格不适合布局，而是以紧凑形式显示列表数据 <table>标签和<frameset>标签一样，不能响应，因此无法适应较小的屏幕尺寸表格需要在加载完所有单元格之后才能渲染，而使用 <div>标签进行布局，则可以独立加载
大型网站案例
让我们看看一些大型网站如何处理这一难题。
以 YouTube 为例，你可能已经看过 YouTube 的桌面版，内容很多，包括顶部的标题，左侧的边栏，彼此堆叠的视频以及页脚。大多数内容对于移动端用户来说是不必要的。
YouTube 在桌面端和移动端的显示
YouTube 可能采用了响应式设计，将多余的元素隐藏在某个地方。
如果你设计过网站，就知道网站性能的重要性。你放在页面上的每个项目都会使网页变慢。因此，对 YouTube 而言，从服务器中获取内容然后隐藏内容是浪费资源。
YouTube 是一个老网站。修改已有代码可能会破坏一些内容。因此，YouTube 采用了一种动态服务。
动态服务是服务器检查网页是在桌面端还是在移动端打开的一种方法，然后，它会根据设备类型动态地为网页提供服务。
这种方法易于实现，因为设计人员不必处理不同的屏幕尺寸。但它也经常不受欢迎，因为如果配置不正确，可能会由于重复的内容问题而影响 SEO。
对于移动端版本，通常使用 m.<site-name> .com 这样的子域名。
类似地，Facebook、Wikipedia 和其他大型网站也采用这种方式。响应式 Web 设计是一种理想的解决方案，但是比较难以实现。
其他一些网站决定不采用响应式设计，而是构建一个移动应用程序。考虑到未来发展，构建移动应用程序是一种合理的方法。但是安装移动应用程序需要用户的信任，因为相比 Web apps，它们可以访问更多数据。
此外，本地移动应用程序的问题在于它们的开发成本很高，因为一套设计和功能必须要适应不同的平台。
响应式 Web 设计策略
上面说的是已有站点所面临的问题。对于新网站，响应式设计已成为与其他网站竞争的必要条件。
谷歌最近还推出了移动优先索引，也就是说，在移动设备上搜索时，谷歌会优先选择移动端友好的网站，这是需要做响应式涉及到另一个原因。
移动优先
假设你有一个装满东西的手提箱，将物品从较小的手提箱转移到较大的手提箱更容易呢，还是从较大的手提箱转移到较小的手提箱更容易？
在移动优先的策略下，首先使网站与移动设备兼容，然后再看在过渡到更大屏幕时如何调整。
移动优先策略
关于这个策略的一个误解是，人们认为它的意思是“仅适用于移动设备”。其实移动优先并不意味着仅针对移动端进行设计，这只是一种安全、容易的方法。
与桌面端相比，移动屏幕上的可用空间要小得多，因此必须用以显示核心内容。
此外，移动用户更频繁地切换页面，因此立即吸引他们的注意很重要。由于页面上的元素较少，并且重点放在内容上，因此网页可以更整洁。
Web 设计的未来
互联网正以惊人的速度发展，人们正在将业务转移到线上，竞争比以往更加激烈。有人在讨论企业是否真的还需要移动应用程序。随着渐进式 Web 应用程序（PWA）和各种 Web API 的出现，网络比以前更加强大。现在，PWA 可以实现大多数功能，例如通知、定位、缓存和离线兼容性。
PWA 是一种基于网页的应用，使用 HTML，CSS 和 JavaScript 等常见 Web 技术构建。
创建 PWA 的过程非常简单，但这超出了本文的范围和核心思想，我们更多地关注 PWA 带来的好处吧。
安装 PWA
你可能已经注意到上面 Chrome 浏览器中的“添加到主屏幕”按钮。对于普通网站，它只不过是主屏幕上的快捷方式图标。但是，如果网站是 PWA，则可以做很多非常酷的事情。
你不需要安装 Web 应用程序即可运行 PWA，它就像是本地应用程序。另外，PWA 可以作为独立的 Web 应用程序运行，顶部没有 Chrome 地址栏，这样就更像应用程序了。PWA 也可以在桌面端工作，这使其成为任何新应用程序的理想之选。它可以在具有 Web 浏览器的任何平台上运行，安全并且具有所有基本的本地功能。
需要明确说明的是：PWA 不能替代本地应用程序。本地应用程序将继续存在。PWA 只是实现这些功能的一种简单方法，它让你无需实际构建移动应用程序。
展望 Web 的未来
我们可以看到，随着技术不断发展，互联网变得越来越容易访问，上网的用户数量呈指数增长。
Web 设计趋势的转变更倾向于性能和用户体验，并且将持续如此。我们还将朝着 Web 3.0 迈进。
Web 3.0 是下一代互联网技术，在很大程度上依赖于机器学习和人工智能（AI）的使用。它旨在创建更多开放的、连接的且智能的网站和 Web 应用程序。
这意味着一切都将被连接起来，机器也将联网，类似于爬虫爬取网站信息并理解页面的上下文。而一个良好、干净、精巧、着重于内容的网页设计将帮助机器更好地理解事物。互联网是一个开放的地方，充满创新的事物。我们可能正在向一个意识控制的网络迈进！
结语
响应式设计
纵观互联网发展史，我们可以看到一些曾经流行的技术逐渐变得过时，人们仍在持续构建更好的互联网。在这个时代，用户体验已经成为首要关注点，任何应用都应该考虑性能和设计要让用户满意。我们不再像互联网发展之初那样只能从有限的工具中作出选择，而是可以自由地发挥创造力，将创造力转变为有价值的东西。
互联网充满魅力，我们可以从很多很棒的网站得到启发。让我们保持热情，继续前进。
原文链接：https://www.freecodecamp.org/news/history-of-responsive-web-design/
作者：Abhishek Chaudhary
译者：Chengjun.L
直播活动预告
9.12 周六上午 10:00 - 11:30，思科软件工程师 S1ng S1ng 继续直播做 freeCodeCamp 的 JS 中级算法题目。他会在活动中分析不同的解题思路，帮助大家学习和巩固 JS 基础知识。
扫码在 freeCodeCamp bilibili 直播间观看、讨论
非营利组织 freeCodeCamp.org 自 2014 年成立以来，以“帮助人们免费学习编程”为使命，创建了大量免费的编程教程，包括交互式课程、视频课程、文章等。我们正在帮助全球数百万人学习编程，希望让世界上每个人都有机会获得免费的优质的编程教育资源，成为开发者或者运用编程去解决问题。
你也想成为
freeCodeCamp 社区的贡献者吗
欢迎点击以下文章了解
点击“阅读原文”
在 freeCodeCamp 专栏阅读更多