响应式蛇！它们能教你什么 CSS 知识？🐍

GenAI LIVE! | 2025年6月4日

“如果一条蛇能回应……”是我最喜欢的 Web 开发梗。如果你对这个极其重要的问题还不熟悉，可以看看下面的内容。

我很喜欢它，它太傻了。但同时也让我们对响应式设计和 CSS 技术有了更深入的思考。

这就是本文的主题！让我们来谈谈四种响应式蛇的实现，看看它们是如何制作的，以及它们能给我们带来什么启发。

🚨 最后有一个 CodeSandbox 供你玩

湿软蛇

Squishy Snake 是我们最基础的响应式蛇。它完全不使用媒体查询！

像所有其他蛇一样，它由 3 个 div 组成：.tail、.body,和.head。以及一个包装器，在本例中为.snake-1。

<div class="snake-1">
  <div class="tail"></div>
  <div class="body"></div>
  <div class="head"></div>
</div>

绘制蛇本身需要用到相当多的 CSS 代码。但我们只关注那些使其具有响应式效果的规则。

在第一个案例中，我编写了 CSS 规则，规定尾部宽度应始终为 200 像素长，头部应为 100 像素长，而主体应填充其余部分。

.snake-1 {
  display: flex;
}
.tail {
  flex: 0 0 200px;
}
.body {
  flex: 1 0 auto;
}
.head {
  flex: 0 0 100px;
}

当您的页面需要两个侧边栏和一些应该填充中间空间的中间内容时，您可以在现实生活中应用相同的技术！

谢谢你，Squishy Snake🐍。下一个！

弯蛇

Curved Snake 共享相同的 HTML 结构和一些 CSS，但当屏幕变短时事情就会变得奇怪！

我们要做的第一件事是翻转弹性顺序，因此蛇的每个部分不是水平呈现，而是垂直呈现。

.snake-2 {
  align-items: center;
  flex-direction: column;
  height: 62vh;
  justify-content: space-between;
}

现在它flex-direction是垂直的，我们需要更新我们的蛇的各个部分，使它们有一个固定的height而不是width。

.snake-2 .tail {
  flex: 0 0 30px;
  width: 100%;
}
.snake-2 .body {
  width: 100%;
}
.snake-2 .head {
  flex: 0 0 30px;
  width: 100%;
}

最后，我们用一些额外的伪元素将尾部、身体和头部连接起来。这些是绿色的垂直部分，仅在屏幕折叠时存在。

.snake-2::before,
.snake-2::after {
  content: '';
  height: 30vh;
  position: absolute;
  right: 0;
  top: 15px;
  width: 30px;
}
.snake-2::after {
  left: 0;
  top: 50%;
}

现在来看看现实生活中的要点：

当你制作响应式页面时，更改flex-direction为vertical可以起到救命的作用。

只需注意，这flex-direction: column会反转 div 在弹性容器内的流动方式，使其justify-content变为垂直和align-items水平！

谢谢，Curved Snake🐍。继续下一个！

蛇片

切片蛇与没有和::before伪::after元素的弯曲蛇非常相似。

另一个不同之处是，这个看起来不那么活泼。

瞧，蛇眼也是伪元素（参见下面的 CodeSandbox）。所以为了改变它的眼睛，我只需要写几行 CSS：

.snake-3 .head::before {
  content: "✖";
}

现实生活中的教训：如果你把蛇切成片，它就会死。别自己处理蛇，打电话给你当地的环保部门！

谢谢你，Sliced Snake，我们不会忘记你的。

下一个！

滚动蛇

我超爱滚动蛇。这绝对是最懒惰的响应式蛇了。

不要让它溢出屏幕，只需添加一些width就overflow-w: scroll可以了。

.snake-4 {
  width: 70%;
  overflow-x: scroll;
}

现在，尽管Scrolly Snake看起来像是响应式的一次非常懒惰的尝试，但它给我们上了重要的一课：

有时候，这overflow: scroll是解决响应问题的唯一方法。

例如，假设您有一张满是列的巨大表格，需要使其具有响应性，或者有一个无法换行的超长字符串。

了解手头上的所有工具非常重要！

CodeSnakebox

尝试编辑/播放/打破以下示例：

感谢阅读！你能想到其他让蛇有反应的方法吗？

在 Twitter 上关注我并告诉我您喜欢这篇文章！

如果你真的喜欢它，请务必与你的朋友分享，这会对我有很大帮助😄