5分钟学会响应式网页设计

在本文中，我将在五分钟内尽可能多地教你一些响应式设计技巧。这显然不足以让你真正掌握它，但它会给你一个最重要的概念的概述，我个人将这些概念定义为：

如果您之后想要更深入地研究这个主题，您可以查看我们在 Scrimba 上的响应式 Web 开发人员训练营，它将使您能够以专业水平构建响应式网站。

单击图像即可进入课程。

但现在，让我们从基础开始！

相对 CSS 单位

响应式网页设计的核心是相对 CSS 单位。这些单位的值是从其他外部值获取的。这非常方便，例如，它允许根据浏览器的宽度来设置图片的宽度。

最常见的是：

在本文中，我们将从百分比单位开始，然后在最后一部分%讨论单位。rem

假设您有一个非常简单的网站，如下所示：

它的 HTML 内容如下：

<body>
    <h1>Welcome to my website</h1>
    <image src="path/to/img.png" class="myImg">
</body>

正如您从下面的 GIF 中看到的，我们的图像默认具有固定宽度：

这不是特别灵敏，所以我们把它改成 70%。我们只需执行以下操作：

.myImg {
    width: 70%;
}

这会将图片的宽度设置为其父级（即标签）宽度的 70% <body>。由于<body>标签横跨整个屏幕宽度，因此图片的宽度始终为屏幕本身的 70%。

结果如下：

创建响应式图像就是这么简单！

不过，我们的响应式布局有一个问题，那就是在非常小的屏幕上看起来很奇怪。70% 的宽度在移动设备上显示时太窄了。您可以自己看一下：在这种情况下，让
如果屏幕宽度小于 768px，就使用不同的样式。

以下是我们在 CSS 中创建媒体查询的方法：

@media (max-width: 768px) {
    .myImage {
        width: 100%
    }
}

仅当屏幕宽度小于 768 像素时才会应用此 CSS 块。

结果如下：

如你所见，页面中有一个断点，图片在此突然变宽。此时浏览器宽度为 768 像素，图片在70%和之间切换100%。

接下来是 Flexbox。如果不了解 Flexbox，你根本无法理解响应式设计。几年前，它一经推出就改变了响应式设计的游戏规则，因为它使得沿轴响应式地定位元素变得容易得多。

为了利用 Flexbox，我们将在标题上方添加一个导航栏，使我们的网站更加复杂一些。以下是其 HTML 代码：

<nav>
    <a href="#">Home</a>
    <a href="#">About me</a>
    <a href="#">Contact</a>
</nav>

默认情况下，它看起来就像这样。我们的
导航项都挤在左侧，这不是我们想要的。我们希望它们在整个页面上均匀分布。

为了实现这一点，我们只需将导航容器变成弹性框，然后使用神奇的justify-content属性。

nav {
    display: flex;
    justify-content: space-around;
}

将display: flex变成<nav>一个弹性框，并justify-content: space-around告诉浏览器弹性框内的项目应该在其周围留出空间。因此，浏览器会将所有剩余空间均匀地分布在这三个项目周围。

它看起来是这样的。你会注意到，它的扩展性很好：

最后一步是让我们的字体也响应式。你看，我希望当屏幕宽度小于 768 像素（我们的媒体查询断点，还记得吗？）时，导航栏和标题会缩小一点。

一种方法是减小媒体查询中的所有字体大小，如下所示：

@media (max-width: 768px) {
    nav {
        font-size: 14px;
    }
    h1 {
        font-size: 28px;
    }
}

但这并不理想。我们最终可能会在应用中设置多个断点，并且包含多个元素（h2、h3、段落等）。结果，我们必须跟踪所有不同断点中的所有元素。这会很乱！

然而，最有可能的是，它们在各个断点处的关系或多或少是相同的。例如，h1总是大于paragraph。

那么，如果有一种方法可以调整一个因素，然后使其余字体大小根据该因素进行缩放，那会怎样？

输入 rems！

Arem基本上就是你为<html>元素设置的 font-size 值。像这样：

html {
    font-size: 14px;
}

因此在本文档中，一rem等于 14px。

这意味着我们可以按单位设置我们网站上的所有字体大小rem，如下所示：

h1 {
    font-size: 2rem;
}

nav {
    font-size: 1rem;
}

然后，我们只需更改<html>媒体查询中标签的 font-size 值即可。这将确保我们的h1和nav元素的字体大小也会随之改变。

以下是我们rem在媒体查询中改变价值的方法：

@media (max-width: 768px) {
    html {
        font-size: 14px
    }
}

就这样，我们为所有字体大小都设置了一个断点。注意当页面宽度超过 768 像素时，字体大小是如何变化的：

虽然才五分钟，但你已经学会了如何根据页面宽度调整字体大小、图片和导航栏。这很不错，你已经迈出了构建响应式网站这项宝贵技能的第一步。

如果您有兴趣继续这段学习之旅，我建议您看看我们关于这个主题的大量 Scrimba 课程！它由 YouTube 上最受欢迎的该主题老师之一讲授，它将带您达到响应式网页设计的专业水平。

祝你编码愉快:)