两个宽度之间的 CSS 媒体查询

在不同的设备上展示不同的布局和样式对于网站的响应式设计是至关重要的。CSS 媒体查询可以让开发者根据设备屏幕的不同大小和方向来调整网站的外观和样式。本文讲解如何使用 CSS 媒体查询来实现在两个特定宽度之间的响应式设计。

何为 CSS 媒体查询

CSS 媒体查询是一种 CSS 技术，使用它可以在不同的设备上呈现不同的内容和布局。通过使用媒体查询，开发人员可以获取设备的宽度、高度、方向或像素密度等信息，在不同的设备条件下为不同的布局和样式设置CSS规则。 CSS 媒体查询可以帮助开发人员创建响应式设计，以便网站在不同的设备上有更好的显示效果。

如何使用 CSS 媒体查询

要使用 CSS 媒体查询，请使用 @media 标签指定设备范围，然后在花括号中指定 CSS 规则。下面是一个例子，我们制定了一个 CSS 规则，当设备宽度小于 768 像素，就修改每个段落的字体大小为 14 像素：

@media only screen and (max-width: 768px) {
  p {
    font-size: 14px;
  }
}

在此例中，我们使用 @media 标签指定了只有在屏幕宽度小于768像素时应用 CSS 规则。only 关键字指定了此规则仅适用于屏幕媒体类型。 screen关键字表示外部设备的屏幕，而不是打印机或投影仪。(max-width: 768px) 表示在设备的宽度小于或等于 768 像素时，应用这条 CSS 规则。在大于768像素的设备屏幕上，这条 CSS规则将被忽略。

两个宽度之间的 CSS 媒体查询

在实际应用中，我们可能需要在设备的两个特定宽度之间设置不同的响应式设计。例如，在移动设备和最小的平板设备上，我们可能需要使用不同的布局和样式，以便更好地适应不同屏幕的大小。使用两个媒体查询可以轻松地实现此目的。

以下示例代码演示如何在外部屏幕宽度小于等于768像素和大于768像素，并小于或等于1024像素的两个宽度之间设置响应式设计：

/* 外部屏幕小于等于 768 像素 */
@media only screen and (max-width: 768px) {
  /* 在小于等于 768 像素时应用的样式 */
  body {
    font-size: 16px;
  }
}

/* 外部屏幕大于 768 像素但小于等于 1024 像素 */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* 在 769 - 1024 像素之间应用的样式 */
  body {
    font-size: 18px;
  }
}

在此例中，我们使用两个媒体查询，每个媒体查询专门处理不同屏幕宽度的响应式设计。第一个媒体查询在外部屏幕小于等于 768 像素的时候应用，即移动设备的屏幕。在该查询内，我们修改了 body 标签的字体大小为16像素。第二个媒体查询在屏幕宽度在 769 像素和 1024 像素之间时应用，即大于移动设备但小于平板设备的屏幕。在该查询内，我们将 body 标签的字体大小修改为18像素。

总结

CSS 媒体查询可以帮助我们在不同的设备上适应不同的外观和样式。我们可以使用 @media 标签指定设备范围，然后在花括号内定义CSS规则。支持响应式设计的网站可以更好地适应不同大小和方向的外部设备。在有需要的情况下，我们可以使用两个完成响应式设计的媒体查询，以便在特定屏幕宽度间设置不同的样式。