一个简单的 CSS 技巧，无需在媒体查询中添加大量代码即可立即使网站响应

嗨，Josh 又来了！最近我一直在教你如何使用 Ruby on Rails 和 React.js 构建项目。今天，我要教你一些不一样的东西——如何轻松让你的网站实现响应式设计。

如果你曾经为响应式网站写过 CSS，你就会知道编写媒体查询有多麻烦。这项响应式技术只需要在每个媒体查询中更改字体大小即可。

关键在于使用 rem 单位，而不是像素。你可能习惯这样写：

.my-class {
 margin-top: 16px;
}

您应该使用 rem 单位，而不是 px 单位。但是 rem 单位是如何工作的呢？

“Rem” 代表根元素 em，它是一个基于根元素字体大小的动态值。浏览器默认字体大小为 16px。这意味着 1 rem == 16px。在上面的例子中，我们可以使用以下代码：

.my-class {
 margin-top: 1rem;
}

但这目前并没有什么改变。我们班的顶尖学生差距还是一样大。那么，我们为什么要这么做呢？

很简单，现在，在您的媒体查询中，您可以更改字体大小，这将改变使用“rem”单位的所有内容。

@media only screen and (max-width: 600px) {
  html {
    font-size: 80%;
  }
}

这会使你的字体大小达到根元素 em 的 80%，当前为 16px。这意味着在这个媒体查询中，你的字体大小变为 12.8px。你编写的所有其他 CSS 现在都将基于这个 12.8px 值。

通过进行这一更改（HTML 文件的字体大小），您将更改使用 rem 单位的所有其他内容。

你应该立刻就能感受到它的强大之处。你无需在媒体查询中编写大量的 CSS，只需调整字体大小即可。当然，你可能需要添加更多 CSS，但大部分繁重的工作都由它完成。

我还应该注意，您不必将所有内容都基于 16px 值（浏览器的默认值），而是可以在 html 元素中设置字体大小，而无需媒体查询。

html {
  font-size: 62.5%;
}

为了确保您能看到我关于 CSS 和其他 Web 开发部分的所有新文章，请在 Twitter 上关注我。