终于理解了响应式设计！

2025-06-07

终于理解了响应式设计！

简介

在 Web 开发领域，响应式设计的概念对于初学者来说往往是一个难以掌握的学习曲线。即使学习了更高级的主题，许多人仍然难以完全掌握响应式设计的精髓，而这一缺陷在他们的项目中尤为明显。

响应式设计对许多工程师来说是一个难以实现的目标，主要是因为截止日期的紧迫性常常使他们的注意力转移到功能性以及项目在个人设备上的显示效果上。这种狭隘的关注点可能会导致他们忽视网站或应用在不同设备上的运行效果。

即使是成熟的网站，响应速度也可能出现问题。就我个人而言，我发现，当我缩小笔记本电脑上的浏览器时，亚马逊网站就失去了它的美感。

图片描述

话虽如此，我认为如今要精通响应式设计并不太难。我只是觉得目前对这个主题的教育关注度不足，也缺乏清晰、全面的呈现。这正是我这篇文章/视频想要表达的。

我总结了七个 CSS 属性/概念，几乎任何响应式设计都必须掌握它们。虽然可能还有其他技术可以增强响应能力，但这七个概念已经足够全面，足以应对大多数场景。除非你的应用极其复杂，否则你应该能够在合理的时间内理解并运用这些概念。

当然，要真正理解这些概念，实践至关重要。因此，我制作了一个视频教程来补充本指南，以实际操作的方式演示所讨论的原理。请记住，每次练习，这些概念都会变得更加直观。

以下是我认为至关重要的主要主题：

  • 尺寸单位
    • 相对于屏幕 - vw, vh   - 相对于其他元素 -%
  • 和属性max-width​min-width
  • 弹性盒子
  • CSS 网格
  • 媒体查询
  • 响应式图像属性
  • JavaScript 实现更复杂的响应行为

尺寸单位

大多数初学者专注于创建完美适配屏幕的设计。因此，他们没有意识到以精确的单位（通常使用像素 (px)）指定元素的大小、内边距 (padding)、外边距 (margin) 等的弊端。问题在于，这些元素的大小永远不会随着屏幕尺寸的变化而变化。过渡到使用百分比和视口单位 (vw/vh) 等非绝对单位，是实现灵活设计的关键。

百分比

初学者必须谨慎使用百分比。理解父子关系的概念需要时间，并且当分配给子元素的百分比是其父元素/容器（可互换术语）大小的百分比，而不是整个屏幕的百分比。

这里还有一点，所有看似“没有父元素”的外部元素实际上都有父元素——<body>元素本身。body 的大小如下：

  • 宽度——屏幕的宽度
  • 高度 - 其内部内容的高度（如果主体中没有任何内容，则为 0）

视口宽度/高度（vw/ vh）

当您希望元素的大小相对于屏幕而定，从而与其直接容器的大小无关时，您需要使用vw和vh。

举个例子。假设你的网站需要包含一个<header>版块<main>，你想明确设置页眉的高度，并让主版块占据屏幕剩余的高度。

实现此目的的一种方法如下：

header {
    height: 300px;
}

main {
    height: calc(100vh - 300px);
}
Enter fullscreen mode Exit fullscreen mode

一个vh单位基本上是视口高度（屏幕高度）的 1%。因此，100vh表示屏幕高度的 100%，也calc(100vh - 300px) 就是“屏幕高度的 100% 减去 300px”。

这确保了主要部分将占据标题之后屏幕的剩余高度。 

你也可以用 flex 来实现这个效果，但我稍后再讨论。在这个具体案例中，我认为两种方法都可以。随着项目复杂度的增加，也许其中一种方法会更好。

何时使用 px

有了这些其他选项以及我将在下面详细介绍的选项，并不意味着 px 单位在如今的 CSS 中已经没有用武之地。在很多情况下，你仍然希望某个元素具有特定的尺寸，并且不随屏幕变化。

UI 设计中的许多元素可能倾向于使用一个固定的尺寸，并且该尺寸永远不会改变。例如，按钮通常就是这种尺寸。

和属性max-width​ min-width

当您希望元素的尺寸增大或缩小但仅达到某个特定点时，这些属性就很有用。

一种常见的情况是搜索栏位于用户界面的顶部。在移动设备上，搜索栏很可能会占据屏幕的大部分宽度。虽然笔记本电脑的搜索栏比手机的要大，但一旦设备变大，你肯定不希望搜索栏几乎占据整个屏幕的宽度。

看看随着屏幕变大，Airbnb 的输入栏是如何变化的（我的意思是它的宽度）。

移动的：

图片描述

药片：

图片描述

大平板电脑/小型笔记本电脑：

图片描述

笔记本电脑：

图片描述

从这些图片来看，可能有点难以分辨，但在移动设备上，搜索栏占据了屏幕的大部分宽度，但就像素而言仍然很小。在平板电脑和小型笔记本电脑上，搜索栏会逐渐增大。但到了某个点，随着屏幕尺寸的进一步增大，搜索栏就不再继续增大了。

弹性盒子

我非常幸运，在弹性盒子发明之前不用学习 CSS。“Flex” 的简称，是一种在位置和大小方面关联元素的绝妙方法。

使用弹性元素时，您可以display: flex; 在父元素上书写，然后它将成为“弹性容器”，其所有直接子元素将成为“弹性项目”。您可以在弹性容器上设置几个直观的弹性相关属性，以描述弹性项目的行为方式。您还可以在弹性项目本身上设置一些属性，以将其样式与其他弹性项目区分开来。

初学者常常不明白弹性关系严格地存在于父元素和子元素之间，而不是父元素和孙元素之间，等等。你可以拥有弹性项目，它们本身也是弹性容器。这意味着一个元素拥有 ， display: flex;并且它的一个子元素也拥有display: flex;。

以下是 flex 最常用的两种场景：

  • Flex 允许你在相邻或上下元素之间创建位置/空间关系。例如，如果你在一行中放置了几个元素，只需使用一两个简单的 CSS 属性，就可以让它们在该行中均匀分布。
  • 使用 flex，您可以轻松更改兄弟元素的定位方向。我所说的方向是指从水平（行）到垂直（列），或反之亦然。例如，想象一下屏幕顶部导航中的链接，在移动设备的汉堡菜单下垂直排列。

CSS 网格

flex 有一个缺点，那就是当你试图同时在两个方向（x 轴和 y 轴）控制元素时。flex 的本质是定义沿同一轴（x 轴或 y 轴）对齐的元素的属性。最常见的情况是创建项目网格时。

当你试图确保它们大小一致时，你可能会遇到麻烦。请参见下图中的示例。

图片描述

使用网格，你只需应用一两个简单的 CSS 属性，问题就迎刃而解了。见下文。

#card-container {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

注意 - 有些人实际上会选择使用网格布局来布局整个网站。说实话，我从来没有花足够的时间去探索这个选项，因为我是先学习了弹性布局（网格布局是后来才出现的），而且弹性布局已经能满足我 95% 以上的需求。我实际上只需要在实际的网格布局中使用网格布局，这些布局通常是我网站的一部分（如果我需要的话）。

在 UI 的不同部分使用 flex 和 grid 没有任何问题！

媒体查询

在几乎所有设计中，当屏幕达到一定尺寸时，你都需要进行更剧烈的改变。小屏幕更适合垂直滚动。而更大的电脑屏幕则可以让你在水平方向上容纳更多元素。

通过媒体查询，您可以定义所谓的“断点”——某些样式将被覆盖以适应其他设备的调整设计的点。

您可以选择先创建移动或桌面 UI，然后创建一个断点，在该断点处定义新样式来覆盖您最初未设计的平台的现有样式。

让我们举个例子，对于移动设备，某些元素应该组织在一列中，但在较大的设备上，它们应该组织在一行中。

假设我们选择了“移动优先设计”，这意味着先设计移动端UI，然后再考虑如何响应大型设备。相比于先为笔记本/台式机设计，这种设计方式在如今被认为是更好的选择，因为人们在手机上花费的时间比在大型电脑上花费的时间更多，而公司更希望让更多用户满意。

好吧，告诉你的应用程序在平板电脑宽度和更大的尺寸下改变其外观的方法基本上是 - 使用媒体查询断点 - 说，“在这个像素宽度和更高的情况下，将这些项目的组织方式改为一行。”

这种改变可能意味着仅仅将弹性容器的弹性方向属性从列改为行，如下所示：

#flex-container {
    display: flex;
    flex-direction: column;
}

screen and (min-width: 768px) {
    #flex-container {
        flex-direction: row;
    }
}
Enter fullscreen mode Exit fullscreen mode

flex-direction: column此代码片段意味着，对于宽度小于 768px 的屏幕，ID 为“flex-container”的元素将具有;，但对于宽度为 768px 及以上的屏幕，该元素将具有flex-direction: row;。

附注 - 每种设备都有相对标准的像素宽度，因此您可以查找设置断点的像素宽度，以指示从移动设备到平板电脑、平板电脑到笔记本电脑等的过渡。

响应式图像属性

通常会使用上述属性的组合来决定网站中图像的大小，并且不需要进一步的 CSS。

然而，有时图像无法随屏幕缩放。我想提供一些属性，以便您在遇到这种情况时可以探索。

其中一个属性是aspect-ratio。此属性允许您定义图像的首选宽高比，以便图像在不同的屏幕尺寸上始终保持相同的高宽比。

另一个属性是object-fit，它可以采用诸如、、、和等值fill，从而可以灵活控制图像如何适应不同的屏幕尺寸。containcovernonescale-down

JavaScript 实现更复杂的响应行为

最后，JS 在响应式设计中发挥着至关重要的作用，可以实现 CSS 无法单独处理的更动态、更复杂的调整，允许根据用户交互或设备规格实现自定义行为。

使用 JS，您可以对更多事件类型做出反应，而不仅仅是屏幕尺寸变化，例如按钮单击、滚动、拖放等等。

使用 JS，您可以编写逻辑，根据所需的任何条件动态调整元素的大小。例如，您可以根据用户的设备、行为、偏好和/或位置调整内容。

JS 将成为 UI 代码的主体，因此如果某些功能无法通过 HTML 和 CSS 轻松实现，则解决方案通常需要 JS。

结论

实现响应式设计是一项平衡的工作，需要巧妙地融合 CSS 技巧和策略性 JavaScript。通过理解并运用上述七个关键概念，开发人员可以创建不仅视觉上吸引人，而且能够适应所有必要设备的网站。

掌握响应式设计需要不断学习和实践。想亲身体验这些概念，别忘了观看配套的视频教程。

请记住，响应式设计触手可及，并且随着每个项目的进行，该过程将变得更加直观。

希望通过这篇文章和视频，我能够让您更清楚地理解响应式设计的概念。

我祝愿您未来的项目一切顺利，感谢您的阅读。

直到下次，
贾里德

文章来源：https://dev.to/jaredcodes/finally-understand-responsive-design-3con
Devto 翻译
PREV
Zod：继 Typescript 之后的下一个热门
NEXT
使用 Express Sessions、Redis 和 Passport 进行 Node.js 会话管理 - 第 1 部分 redis-session-demo 概述 如何运行 工作原理 分支