使用 HTML 和 CSS 制作响应式（生日）贺卡

在本教程中，我将向您展示如何仅使用 HTML 和 CSS 制作响应式卡片。

响应式卡片是指在各种尺寸的屏幕上都能完美呈现的卡片。我们可以通过使用flexbox相对高度和宽度（而非绝对尺寸）来实现这一点，还可以@media使用规则来定义 CSS 属性，使其仅在特定屏幕尺寸上生效。

HTML

这是一张简单的卡片。卡片内页有一张图片和一些文字。

<div class="card">
    <img src="./birthday.svg" alt="birthday" class="birthday">
    <div class="text">
      <h1>Happy Birthday!</h1>
      <p>I hope you have a wonderful birthday</p>
      <p>- Jonah Lawrence</p>
    </div>
  </div>

相对大小和 Flexbox

这里我将高度设置为85vh视口高度的 85%，宽度设置为80vw视口宽度的 80%。使用这种相对尺寸而不是绝对尺寸（例如 800px）可以让元素根据屏幕大小自动拉伸和收缩。

使用 Flexbox，我们可以将卡片中的元素沿高度或宽度方向展开。我们还可以用它来使它们垂直和水平居中。我推荐您查看Codepip 的Flexbox Froggy，它提供了一种交互式的方式来理解 Flexbox 的工作原理。

默认情况下，flex 方向为row（从左到右），但您可以使用flex-direction: column（从上到下）来覆盖此设置。现在，我们的图像显示在顶部，文本显示在底部。

.card {
  height: 85vh;
  width: 80vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media规则

当屏幕宽度至少达到 1000px 时，我们就不需要再将图像放在最上面了，我们可以将其与文本并排放置。

使用@media如下规则，当屏幕最小宽度为 1000px 时，flex-direction: row-reverse将应用该规则，.card使 flexbox 将项目从右到左放置（图像在右侧，文本在左侧）。

@media only screen and (min-width: 1000px) {
  .card {
    flex-direction: row-reverse;
  }
}

在像横屏手机这样屏幕很短的设备上，我们也可能需要使用横屏布局，所以我们可以使用以下规则max-height。

此规则中的 CSS 属性仅对最大高度为 640px 的屏幕生效。

@media only screen and (max-height: 640px) {
  .card {
    flex-direction: row-reverse;
  }
}

演示

尝试以全屏视图运行演示，看看效果如何。

调整视口大小，即可从纵向视图切换到横向视图。

观看完整教程

在这段视频中，我将完整地演示从零开始创建这个演示的过程。

想要全面了解我是如何设计这张响应式生日贺卡的，一定要去看看！

关于我

我叫乔纳·劳伦斯，是一名全栈开发人员。

您可以通过以下方式找到我：

YouTube 📺 https://www.youtube.com/DevProTips

Twitter ✍ https://twitter.com/DenverCoder1

Github 👨‍💻 https://github.com/DenverCoder1

如果你喜欢我的内容，请务必点赞、转发并订阅我的频道！