在联网设备快速发展的格局中，响应式网页设计在Web开发中仍然至关重要。

不久前，“响应式网页设计”一词尚不存在。但是今天，我们大多数人不得不在某种程度上采用它。

据统计, 截至 2019 年，61% 的 Google 搜索访问来自移动设备。在 2020 年 9 月，Google 将改变其搜索算法，让其优先展示移动端友好的网站。

在这篇文章中，我将介绍以下内容：

• 响应式网页设计是什么
• 视口元标签及其作用
• 响应式网页设计中适应手机和平板电脑的有效技术
• 帮助模拟和监控手机和平板电脑用户体验的工具

响应式网页设计是什么？（RWD）

响应式 Web 设计是一种专注于一个网站用户环境的方法，而用户环境则取决于他们连接互联网的设备。

有很多设备特性有助于实现以用户为中心，例如：

• 网络连接
• 屏幕尺寸
• 交互类型（触屏、触控板）
• 图像分辨率

在响应式 Web 设计流行前，很多公司管理着一个完全独立的网站，用于接收基于用户代理标识的流量导向。

但在响应式 Web 设计中，服务器总是给所有设备发送相同的 HTML 代码，而 CSS 则用于改变页面在设备上的渲染。

无论采用上述哪种策略，为手机或平板电脑建站的第一步是确保浏览器知道意图。这就是视口元数据标签发挥作用的地方。

识别一个移动端网站的视口元数据标签

视口元数据标签指示浏览器如何调整页面以适应每种设备的宽度。

当视口元数据标签缺省，移动端浏览器将以默认桌面端设置来显示网页。 这导致了看似缩小的结果、非响应式的体验。

以下是一种标准实现：

<meta name="viewport" content="width=device-width,initial-scale=1" />

视口元数据标签示例

现在浏览器知道发生了什么，我们可以利用流行的技术来让我们的网站具备响应式能力。🙌

针对不同屏幕尺寸和方向的 CSS 媒体查询

如果你初试响应式 Web 设计，媒体查询是要学的首要 CSS 特性。媒体查询让你能根据视口宽度设置元素样式。一种流行的 CSS 策略是优先编写移动端样式，再在它们之上构建更复杂的桌面专用样式。

媒体查询是响应式 Web 设计的一个重要部分，通常用于处理网格布局、字体字号、外内边距在屏幕尺寸和方向下的差异。

下面是一个移动优先的样式常见用例示例，其中一列在较小的设备上宽度为 100%，但在较大的视口上宽度为 50%。

.column {
    width: 100%;
}

@media (min-width: 600px) {
  .column {
    width: 50%;
  }
}

移动优先 CSS 示例

以上代码是一个简单示例，但它实际在做的是非常有趣的。

1. 在考虑移动优先时，column 元素被设置一个 100% 的宽度；
2. 通过使用 min-width 媒体查询，我们专门为最小宽度 600px 的视口（视口宽于 600px）定义了规则。所以，宽于 600px 的视口，我们的 column 元素将有父级 50% 的宽度。

尽管媒体查询对于响应式 Web 设计至关重要，很多其它新的 CSS 特性也在浏览器中被广泛采用与支持。Flexbox 便是其中之一，在响应式 Web 设计中是重要的 CSS 特性。

什么是 Flexbox？

你可能好奇 —— “Flexbox 是干啥的？” 更好的问题是 —— “Flexbox 不能干啥？” 最简单的 CSS 垂直居中方法是啥？Flexbox。你怎样创建一个响应式网格布局？Flexbox。我们怎么实现世界和平？Flexbox。

Flexbox 布局（弹性盒子）模块提供了一种更有效的方式去布局、对齐和在容器项目间分配空间，即使它们的尺寸是动态的（因此就有了 “flex” 这个词）。

在以下示例中，我们结合如上所述的媒体查询来创建一个响应式网格。

<style>
  main {
    background: #d9d7d5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  div {
    background: #767775;
    flex-basis: 100%;
    height: 100px;
    margin-bottom: 0.5rem;
  }
  @media (min-width: 600px) {
    main {
      flex-wrap: nowrap;
    }
    div {
      flex-basis: 33%;
    }
  }
</style>
<main>
  <div></div>
  <div></div>
  <div></div>
</main>

CSS flexbox 示例

我们用这段代码完成了以下事情：

1. 在我们的 main 容器元素中用 display: flex 建立一个 flexbox 布局。
2. 先设置移动端样式。我们给 main 元素设置 flex-wrap: wrap，它允许子元素在我们的 flexbox 布局中换行，如下图 1 所示。我们在我们的 div 元素设置 flex-basis: 100% 来确保它们在 flexbox 布局中占满父级宽度的 100%（图 1）。
3. 再设置更大设备（如平板、桌面电脑）的样式。我们利用一条与我们上节示例类似的媒体查询来设置我们的容器 main 元素为 flex-wrap: nowrap。这样确保子元素不换行，并且它们在行类型的布局中维持一列。通过在媒体查询中设置 div 为 flex-basis: 33% —— 我们创建了一些为父级宽度 33% 的列。
4. 在这个例子中，魔法将在我们结合媒体查询和 flexbox 规则的更大设备中出现。因为我们定义了 display: flex，并且没在媒体查询中覆盖这条规则，我们就拥有了一个适配手机、平板电脑和桌面电脑的 flexbox 布局。媒体查询 flex-basis: 33% 和继承的 display: flex 规则将给我们一个可识别的 flexbox 布局（如图 2 所示）。在过去，为了实现这种列类型布局，我们需要做一些严肃的繁重工作并写一团乱糟糟的 CSS。

Flexbox 提供了一种很棒的方法去实现多变而流动的布局。在一些实例中，我们在纵向空间中可能没有太多的自由。我们可能需要给一个元素设一个固定高度。在这种情形下，我们有另一种可用的技术 —— 水平滚动。

基于 Overflow Scroll 的水平滚动

也许有一天，你有一些溢出视口的内容，并且没有优雅的处理方法。 瞧这边…… overflow scroll 能救你。🦸

这种技术的常见用处包括可滚动菜单和表格。以下是一个可滚动菜单的示例。

<style>
  menu {
    background: #d9d7d5;
    padding: 0.25rem;
    overflow-y: scroll;
    white-space: nowrap;
  }

  span {
    background: #767775;
    color: #ffffff;
    display: inline-block;
    margin: 0.25rem;
    padding: 0.5rem;
  }
</style>
<menu>
  <span>响应式 Web 设计</span>
  <span>RWD</span>
  <span>响应式菜单</span>
  <span>Overflow scroll 示例</span>
  <span>这是一大堆内容！</span>
  <span>是的</span>
  <span>我们</span>
  <span>有</span>
  <span>另一个</span>
  <span>项目</span>
</menu>

示例：水平滚动菜单

你是怎么做到的？让我们深入探讨一下。

• overflow-y: scroll 是这个食谱的关键成分。通过指定它的子元素将在水平坐标上以滚动行为溢出。
• 没那么快！尽管你可能认为 overflow-y 就够了，我们也需要告诉浏览器用 white-space: nowrap 不让子元素换行。🤷

现在我们掌握了一些响应式网页设计（RWD）布局技巧，让我们来看看那些因其视觉特性而具有挑战的元素——图片和视频。

响应式图片

通过使用现代图片标签属性，我们能适应各类设备和分辨率。以下是一个响应式图片的示例。

<style>
  img {
    max-width: 100%;
  }
</style>

<picture>
  <source type="image/webp" srcset="https://my-image.com/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x">
  <source type="image/png" srcset="https://my-image.com/my-image-100.png 1x, https://my-image.com/my-image-200.png 2x">
  <img alt="my image" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100">
</picture>

这在做很多事情。让我们来分解一下：

1. 通过设置 max-width: 100%，图片会根据其容器宽度来放大或缩小。
2. 通过结合使用 picture、source 和 img 标签，我们实际上只渲染一张图片，而且是只加载那张最适合用户设备的图片。
3. WebP 是一种现代图片格式，为 Web 图片提供优越的压缩性。利用 source，我们能为支持它的浏览器采用一张 WebP 图片，而另一个 source 标签则为不支持 WebP 的引用一张 PNG 版图片。
4. srcset 是用来告诉浏览器根据分辨率应该用哪张图片。
5. 我们利用 loading="lazy" 属性值对来启用原生懒加载。

响应式视频

响应式视频是另一个激发一大批文章和文档的主题。

一个建立响应式图片、视频、iframe 和其它元素的关键策略涉及使用 aspect-ratio。Aspect ratio 盒子不是一个新技术，而且对 Web 开发者来说是非常有用的工具。

关于如何实现“流动”宽度视频，这篇文章提供了一个扎实的范例。让我们看一下代码，再分解一下。

<style>
  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }

  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="videoWrapper">
  <!-- 复制、粘贴自 YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

在这个例子中，我们有一个嵌入为 iframe 的 YouTube 视频和一个带有 videoWrapper 类的 div 容器。这段代码做了很多…… 让我们来深挖。

• 在容器元素上的 position: relative 允许子元素利用相对于它的绝对定位。
• height: 0 结合 padding-bottom: 56.25% 是这里的要点，它建立了一种动态行为，强制 16:9 的纵横比。
• 设置在 iframe 上的 position: absolute、top: 0 和 left: 0 创建了一种行为，让元素相对父元素绝对定位自己…… 将其固定在左上。
• 最后，长宽的 100% 让子元素 iframe 占它父元素的 100%。父元素 .videoWrapper 完全掌控这个 aspect ratio 布局的建立。

我知道…… 这很多。为了让视频和图片在手机和平板电脑上看起来舒服，我们还有更多可以做的。除此之外，我也鼓励对这些主题的独立研究。

好了，现在我们是响应式 Web 设计的大师了，我们如何测试我们做了什么？幸运的是，我们有很多工具去模拟和监控各种设备上的用户体验。

模拟和监控响应式网站的工具

有各种有用的工具去帮助我们创建响应式 Web 设计的网站。以下是我发现的两个特别有用的。

Chrome DevTools 移动端仿真

Chrome 的 DevTools 提供各类平板电脑和手机的移动端仿真。它也提供一个“responsive”选项，让你定义一个自定义视口尺寸。

用 Foo 监控移动端网站性能

Lighthouse 是一个开源工具，提供一种分析网站设备特定性能的方法。

Foo 在幕后使用 Lighthouse 来监控网站性能，并提供分析反馈。你可为桌面端和移动端设备同时设置监控，以获得有关你的网站响应性的持续反馈。

比如，一份 Lighthouse 报告将根据设备标注出未正确加载的图片。

结论

响应式 Web 设计将继续快速发展，但如果我们保持在当前趋势之上，我们能为我们的用户提供最佳体验。我希望这些工具和技术对您有所帮助！

不但我们网站的用户将受益于一个多功能的设计，同时搜索引擎也将提升我们网页的排名。

今天的大多数网站都是响应式的。而如果你需要在这些网站上将图像居中对齐，你需要学习如何用 CSS 使图像流畅或响应。

我在几周前发布了一个视频教程，解释了如何一步一步地制作一个响应式网站。在视频中，我们做了一张响应式图片。但在这篇文章中，我想更详细地介绍一下如何使图像具有响应性。

你还将了解到一些在你试图使图像响应时可能出现的常见问题——我将尝试解释如何解决这些问题。

如何用 CSS 使图像具有响应性

我应该使用相对单位还是绝对单位？

让图像变得流畅，或者说具有响应性，实际上是非常简单的。当你上传一张图片到你的网站时，它有一个默认的宽度和高度，你可以用 CSS 来改变它们。

要使图像具有响应性，你需要为其 width 属性赋予一个新值。然后图像的高度会自动调整。

要知道的重要一点是，对于 width 属性，你应该始终使用相对单位，例如百分比，而不是绝对单位，例如像素。

img {
  width: 500px;
}

例如，如果你定义了 500px 的固定宽度，你的图片就不会有响应性——因为这个单位是绝对的。

img {
  width: 50%;
}

这就是为什么你应该指定一个相对单位，比如 50%。这种方法将使你的图像流畅，并且无论屏幕尺寸如何，它们都可以自行调整大小。

我应该使用媒体查询吗？

我被问得最多的问题之一是是否应该使用媒体查询。

媒体查询是 CSS 的另一个重要功能，有助于使网站具有响应性。我不会在这里详细介绍，但是你可以稍后阅读我的另一篇文章以了解如何更详细地使用媒体查询。

这个问题的答案是：“视情况而定”。如果你希望你的图像在一台设备和另一台设备之间具有不同的尺寸，那么你将需要使用媒体查询。否则，你不需要使用。

现在对于此示例，你的图像对于任何类型的屏幕都有 50% 的宽度。但是当你想让它全尺寸用于移动设备时，你需要从媒体查询中获得帮助：

@media only screen and (max-width: 480px) {
  img {
    width: 100%;
  }
}

所以根据媒体查询规则，任何小于 480px 的设备都会占据屏幕宽度的全尺寸。

你还可以在下面观看此帖子的视频版本：

为什么 max-width 属性不是很好？

开发人员制作响应式图像的另一种方法是 max-width 属性。但是，这并不总是最好的方法，因为它可能不适用于每种屏幕尺寸或设备。

在我们继续举例之前，首先要了解的是 max-width 属性的作用。

max-width 属性设置元素的最大宽度，它不允许该元素的宽度大于其 max-width 值（但可以更小）。

例如，如果图像的默认宽度为 500px，而你的屏幕尺寸只有 360px，那么你将无法看到完整的图像，因为没有足够的空间：

img {
  max-width: 100%;
  width: 500px;  // assume this is the default size
}

你可以为图像定义一个 max-width 属性并将其设置为 100%，这会将 500px 的图像缩小到 360px 的空间。因此，你将能够在较小尺寸的屏幕上看到完整的图像。

好消息是，由于你使用的是相对单位，因此图像在任何小于 500 像素的设备中都是流畅的。

不幸的是，屏幕尺寸会稍微大于 500 像素，但图像不会，因为它的默认宽度为 500 像素。这种方法会破坏图像的响应能力。

要解决此问题，你需要再次使用 width 属性，这使得 max-width 属性派不上用场。

高度呢？

你可能遇到的另一个常见问题与 height 属性有关。通常，图像的高度会自动调整大小，因此你无需为图像设置 height 属性（因为它会破坏图像）。

但在某些情况下，你可能必须使用必须具有固定高度的图像。因此，当你为图像分配固定高度时，它仍然会响应，但看起来不太好。

img {
  width: 100%;
  height: 300px;
}

幸运的是，CSS 提供了另一个属性来解决这个问题……

解决方案：Object-Fit 属性

为了更好地控制你的图像，CSS 提供了另一个名为 object-fit 的属性。让我们使用 object-fit 属性并设置一个值，这将使你的图像看起来更好：

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: bottom;
}

如果需要，你还可以使用 object-position 属性（除了 object-fit）来关注图像的特定部分。许多人不知道 object-fit 属性，但它可以帮助解决这些问题。

我希望这篇文章可以帮助你理解和解决响应式图像的问题。如果你想了解有关 Web 开发的更多信息，请随时查看我的 YouTube 频道。

感谢你阅读本文！

这并不是一蹴而就的，开发人员想出了许多技术来使网站适配不同的屏幕尺寸，最终才有了现在的响应式网页设计。

本文将涉及早期的网络、开发人员适配不同屏幕尺寸的方式以及现代的响应式设计。

第一个网站

1991 年 8 月 6 日，第一个网站上线。该站点由 Tim Berners - Lee 创建，网站详细介绍了万维网（W3）项目。它最初是在欧洲核研究组织 CERN 的 NeXT 计算机上运行的。

尽管今天原始站点已经离线，但 CERN 于 2013 年 启动了一个项目，以“保留与 web 的诞生相关的一些数字资产”。从最初的计算机名称、IP地址到第一个网站的 URL，所有内容均已恢复到可用状态。

虽然该网站的原始 1991 年的版本丢失了，但是恢复了1992 年的版本。如果感兴趣，可以访问 http://info.cern.ch/hypertext/WWW/TheProject.html。

早期的 web 设计

自 Berners-Lee 的第一个网站上线以来，web 迅速发展。每年都有成千上万的网站开通，新的设计技术与 Web 技术本身一样发展迅猛。

在 90 年代初期，网页设计非常简单。大多数网站都使用简单的 header，paragraph 和早期 list 标签（如<dl>，<dt> 和 <dd> 标签）来组织信息。

1994 的雅虎 (地址)

更复杂的站点必须使用表格才能控制页面的布局，创建诸如导航和侧边栏之类的东西，这在当今已经很普遍。

如今网站样式可以通过各种方式设置，CSS 是由 Håkon Wium Lie 于 1994 年在 CERN 工作时首先提出。在 1996 年，同样由 Berners-Lee 创立的万维网联盟（W3C）发布了层叠样式表，level 1（CSS1）的正式规范。

借助 CSS 和其他技术（如 JavaScript 和 Flash），Web 开发人员可以使设计更具创造性和趣味性。

1997 年的网站 (地址)

90 年代末 20 年代初，web 设计和用户体验的模式已经出现，网站看起来开始像我们今天使用的网站：

2000 的 DeviantArt (地址)

初期的响应式设计方法

随着 CSS 的广泛使用，开发人员不得不在布局、设计和排版等方面花费更多的时间。但是他们不必担心的一件事是适应不同的屏幕尺寸。当时，大多数人的显示器是 640x480、800x600 或 1024×768。

尽管如此，开发人员仍然找到了兼容这些显示器或浏览器窗口大小的几种不同方法，最终发展出了当今我们所熟知的响应式 Web 设计。让我们来看看其中的一部分。

流式布局

根据 MDN，开发人员早期采用的两个主要布局选项是 “固定宽度” 和流式布局，固定宽度是将其内容设置为固定的的像素宽度，流式布局内容使用百分比确定宽度。

MDN 上有 固定宽度 和 流式布局 的一些不错的例子。

流式布局最早由 Glenn Davis 创造并推广，轰动一时，可以认为是初期响应式 Web 设计的主要方法之一。

如果显示器的分辨率与固定宽度布局设计的分辨率不同，固定宽度布局可能只能显示一部分，但流式布局要灵活性的多，可以适应不同的显示器分辨率或浏览器尺寸。

流式布局的一个例子 (地址)

但是流式布局并不是完美的。在流式布局的网站上，内容可能会溢出，在较小的屏幕上文字可能会换行，在较大的屏幕上可能会有很多不必要的空白。

分辨率相关的布局

2004 年，卡梅隆·亚当斯（Cameron Adams）撰写了一篇博客，详细地介绍了一种使用 JavaScript 根据浏览器窗口大小载入不同样式表的布局方法。

这种技术后来被称为分辨率相关的布局（以 Adams 的博客文章标题命名）。即使当时对开发人员来说需要做额外的工作，但它可以对站点布局进行更细粒度的控制，并且可以在 CSS breakpoints 流行之前作为 CSS breakpoints 的早期方案。

Adams 的分辨率相关的布局例子 (地址)

这种方法的缺点是，开发人员必须为每个目标分辨率创建不同的样式表，并确保样式和 JavaScript 在所有主要浏览器上均能正常工作。

当时有很多浏览器，有时它们对 HTML，CSS 和 JavaScript 的处理方式也不同。实际上，这也是 jQuery 如此流行的主要原因之一——它抽象了许多浏览器差异，因此只需要编写一次代码。

移动子域名网站

随着越来越多的移动设备的出现，诺基亚，黑莓以及 iPhone 都配备了自己的浏览器。开发人员不得不想出其它方案来适应不同的屏幕尺寸。

一种巧妙方法是创建一个仅适用于移动设备的网站版本，并使其在子域名中访问。

移动子域名网站（有时称为 m-dots 或 m 子域名）就是托管在网站子域名中的的移动特定版本，通常是 m 子域名。

例如，Facebook 的桌面版本是 facebook.com，或更具体地说，位于 www 子域名 www.facebook.com 下：

Facebook 的桌面版本网站

而 Facebook 的移动版本位于 m.facebook.com 下：

Facebook 的移动版本网站

如果你登录到两个应用程序并对比它们，会发现它们看起来非常相似。它们实际上是两个独立的应用程序——移动版本要简洁一些，并且经过了优化，可以在较小的屏幕和大多数移动浏览器上运行。

移动子域名网站今天仍然存在，并且这种方法具有一定的优势。通过在移动子域名上使用单独的网站版本，开发人员可以确保网站快速加载，消耗更少的移动数据。

此外，拥有子域名网站可以使开发人员真正针对移动设备量身定制 SEO（搜索引擎优化），为该网站的移动版本吸引更多流量。

但是它也有一些的缺点，使用移动子域名网站意味着开发人员必须维护两个（有时非常不同）的网站，而不是仅维护一个。

移动子域名网站有时可能会令人困惑。我敢肯定，很多人都知道尝试访问网站的桌面版本时却被重定向到移动版本的痛苦。

不仅如此，开发人员还必须弄清楚需要重定向的设备以及在什么条件下重定向。

传统上，这是通过检查访问者浏览器的 user agent 来完成的，但是随着设备的增加，user agent 越来越多。最终，开发人员开始使用 JavaScript 检查浏览器窗口的宽度并基于此进行重定向。

你可能正想，这听起来很像今天的响应式网页设计。的确如此，在很多方面，现代的响应式 Web 设计是对过去技术的一种归纳。开发人员已经想出了很多好的想法，可以在这些想法的基础上进行构建。

响应式 web 设计

到 20 年代后期，设计一个可以在不同屏幕尺寸上运行的网站已迅速成为一种规范。但是要做到这一点，开发人员必须想出很多技巧。

即使是简单的布局，开发人员也必须使用 max-width: 100% 技巧来生成响应式的图像，使用 float 和 clearfixes 来避免错乱。

然后在 2010 年，名为 Ethan Marcotte 的开发人员在 A List Apart 中发表了一篇文章，他概述了一种关于弹性 Web 设计的新思路。 在文章中，Marcotte 列出了创建响应式网站的三个重要组件：fluid grids、flexible images 和 media queries。

除了概述响应式网页设计的主要组成部分之外，Marcotte 还因创造了该术语本身而闻名，响应式 web 设计以 2010 年发布的文章 的标题命名。

Fluid grids

Fluid grids 是网站应采用不同数量的弹性的列（根据当前屏幕大小而增长或收缩）的想法。在移动设备上，应该有一两个弹性的内容列，而在台式机上则可以有更多的列：

移动设备上 Ethan Marcott 的网站 (地址)

相同网站在桌面上的效果 (地址)

你可以在 较早的文章中阅读更多 Marcott 关于 fluid grids 的思想。

Flexible images

Flexible images 是指图像应随其所在的 fluid grid 一起增大或缩小：

移动设备上的小图 (地址)

桌面网站上的大图 (地址)

一种常见的方法是使用上面提到的 max-width 技巧。

如果容器中有图像，则图像可能会溢出，尤其是在响应式容器中。例如，如果满足以下条件，则图像可能会像这样溢出：

<style>
  .container {
    width: 250px;
    outline: solid;
    text-align: center;
  }
</style>
<body>
  <div class="container">
    <img src="./images/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg" />
    <p>Example image</p>
  </div>
</body>

但是，如果将其 max-width 设置为 100%,，则图像不会溢出：

<style>
  .container {
    width: 250px;
    outline: solid;
    text-align: center;
  }

  .my-image {
    max-width: 100%;
  }
</style>
<body>
  <div class="container">
    <img
      class="my-image"
      src="./images/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg"
    />
    <p>Example image</p>
  </div>
</body>

甚至可以适配父容器大小：

<style>
  .container {
    width: 600px;
    outline: solid;
    text-align: center;
  }

  .my-image {
    max-width: 100%;
  }
</style>
<body>
  <div class="container">
    <img
      class="my-image"
      src="./images/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg"
    />
    <p>Example image</p>
  </div>
</body>

Media queries

CSS 媒体查询 2010 年就已经可用，但直到 2012 年 W3建议正式发布后才被广泛采用。

媒体查询只是一个 CSS 规则，它是根据诸如媒体类型（screen、print等）和媒体功能（width、 height等）之类的选项触发：

@media screen and (min-width: 500px) {
  background-color: red;
}

即使当时媒体查询还比较简单，但可以通过它实现断点，如今断点仍在响应式 Web 设计中使用。

断点是网站根据设备或浏览器窗口的宽度显示不同的布局或样式。例如，上面代码片段的完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <style>
    .container {
      width: 250px;
      outline: solid;
      text-align: center;
    }

    .my-image {
      max-width: 100%;
    }

    @media screen and (max-width: 500px) {
      .container {
        background-color: red;
      }
    }
  </style>
  <body>
    <div class="container">
      <img
        class="my-image"
        src="./images/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg"
      />
      <p>Example image</p>
    </div>
  </body>
</html>

请注意，对媒体查询使用 viewport 元标记 很重要。在大多数情况下都可以使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

在上面的媒体查询中，这是分辨率为 500px 或以下时容器的外观：

这是分辨率为 501px 或更高时的外观：

移动优先 vs 桌面优先

最近，有两种主要的响应式 Web 设计方法：移动优先或桌面优先。两者都是完全有效的选择，并且各有利弊。

如果你是从头开始设计网站的，当今许多开发人员会认为以移动优先是最佳选择——移动设计往往是一栏式的，并且容易得多。

如果你想采用移动设备优先的方式，可以正常编写移动样式，然后在开始创建平板电脑和台式机布局时，使用 min-width 创建类似上述的断点。

但是，也许你正在基于一个较旧的站点上进行设计，而该站点在设计时只考虑了台式机，因此需要使其适应较小的移动设备。在这种情况下，可以使用具有 max-width 的媒体查询来定位那些较低的分辨率。

你可以在本文中了解有关移动优先和桌面优先的设计理念的更多信息。

结语

现在，你对响应式 Web 设计的历史有了一点了解，以及开发人员在我们今天拥有的一切之前经历的点滴。

如果你想深入研究响应式网页设计、Flexbox 和其他现代技术，请在我们的 YouTube 频道上查看以下为时 4 小时的教程：

https://www.youtube.com/watch?v=srvUrASNj0s&t=3s

如果你想了解 CSS Grid（创建复杂，灵活的布局的新方法）的方法，请查看我们的教程。

你的响应式网页设计的经历是怎么样的？ 如果哪里不准确，在 Twitter 联系我。

原文：A Brief History of Responsive Web Design，作者：Kris Koishigawa