基础响应式网站

在这篇博客中，我将分享一些关于如何在网站上实现响应式设计的基本概念，这些概念很容易理解。创建响应式网站一开始可能会有点令人困惑，但一旦你掌握了基本原理，一切就迎刃而解了！

什么是响应式网站？

响应式网站能够让网站和页面在所有设备和屏幕尺寸上自动适应，无论是台式机、笔记本电脑、平板电脑还是智能手机。我们通过使用 CSS 的各种设置来实现这一点，从而为用户提供最佳体验。为了更好地理解，我们将讨论媒体查询和 CSS 单元的基本概念。

媒体查询

媒体查询是应用于 CSS 的条件语句。它指示浏览器根据设备的性能添加或移除特定的 CSS 规则。随着屏幕尺寸的变化，我们需要重新调整布局。通常情况下，随着屏幕尺寸的减小，布局会采用垂​​直方向的排列方式。

媒体查询的语法如下所示：

@media <media-type> and (expressions) {
     CSS code;
    }

• @media告诉浏览器我们正在开始媒体查询。
• media-type 描述了我们将要应用规则的设备类型。例如：我们可以在此处输入 media-type“screen”。这是一个可选输入。如果我们不使用它，则规则将应用于所有设备。
• （表达式）可以是设备的宽度或方向。
• 在媒体查询中，我们可以指定一些要应用的 CSS 规则。

以下是一个媒体查询的实际应用示例：

@media (max-width: 500px) {
  .Projects .Container .img
    width: 80%;
    padding-right: 20%
}

在这个例子中，我们没有使用可选的 media-type 属性。而是使用了表达式 max-width: 500px（我们的截止点），它告诉浏览器，媒体查询中的规则应该限制在屏幕宽度为 500px 或更小的设备上。在媒体查询中，我们包含了常规的 CSS 代码，并可以根据需要设置不同的值。

CSS 单位

CSS 单位决定了你为元素或其内容设置的属性的大小。

以下是一个 CSS 单元示例：

font-size: 16px;

font-size 是属性名，16px 是该属性的值。px 是 CSS 中的一个单位，称为像素。

CSS 单位可以分为绝对单位和相对单位：

相对单位将帮助我们构建响应式网站。让我们详细讨论一下最常用的单位。

相对于其父母（%）：

CSS FILE
.App .Parent {
  background-color: blue;
  width: 100%
}
.App .Child {
  background-color: yellow;
  width: 50%
}

• 在这个例子中，在一个父级 div 元素内，我们有一个子级 div 元素。子级 div 元素的大小将是父级 div 元素的 50%。

视口（vw，vh）

• 视口是指用户的可视区域，无论是台式机还是智能手机。vw 代表视口宽度，vh 代表视口高度。例如：100vh 表示视口高度的 100%（智能手机的 100% 高度或台式机的 100% 高度）。

字体大小（em，rem）

• em 是相对于字体大小而言的（始终是父字体大小的 x 倍）。例如，1em 等于父字体大小。2em 是父字体大小的两倍。3em 是父字体大小的三倍。

HTML:
<div className="Parent">
  <h1>Main Title</h1>
  <h2>Next Title</h2>
</div>

CSS:
.App .Parent {
  font-size:16px
}
.App .Parent h1 {
  font-size: 3em;
}
.App .Parent h2 {
  font-size: 2em;
}

父级div的字体大小为16px。h1的字体大小为3em，是父级div字体大小（16px）的3倍。因此，h1的宽度为48px（16px*3em），h2的宽度为32px（16px*2em）。

• rem 属性的值相对于根 HTML 文件的字体大小。如果根 HTML 文件未定义字体大小，则其值将等于浏览器的默认字体大小（通常为 16px）。这是一种更推荐的方法。

CSS:
html {
  font-size: 20px;
}
.App .Parent h1 {
  font-size: 3rem;
}
.App .Parent h2 {
  font-size: 2rem;
}

在这个例子中，根字体大小为 20px。我们的 h1 字体大小是根字体大小的 3 倍（20px*3rem）。

应用相对单位

为了将这些相对单位应用于响应式网站，我们可以修改 CSS 文件，将需要的地方的绝对单位更改为相对单位。我们还可以在 CSS 文件中添加媒体查询。现在您已经了解了响应式网站的基本概念，不妨尝试一下。对于更复杂的网站，需要应用更多概念。您可以参考许多资源来了解更多细节，例如：YouTube 视频以及 Udemy、Codecademy、Treehouse 等热门网站。