媒体查询最小值和最大值 - CSS

简介

在 CSS 中，媒体查询是一种用于检测指定属性在何种媒体条件下是否生效的方式。我们可以通过设置一个媒体查询，来为不同的设备（比如屏幕大小）设定不同的 CSS 样式。

媒体查询通常包含一个最小值和一个最大值，用于检测屏幕宽度是否在特定的范围内。这样可以帮助我们为不同大小的屏幕（比如桌面，平板电脑和手机）编写适当的 CSS 样式。

示例

以下是一个简单的媒体查询示例，当屏幕宽度小于 768 像素时为文本设置红色：

@media (max-width: 767px) {
  .text {
    color: red;
  }
}

在这个示例中，(max-width: 767px) 是最大值媒体查询，它检查屏幕宽度是否小于 767 像素。如果是，媒体查询中的 CSS 样式将被应用于 .text 类。

类似地，我们也可以使用最小值媒体查询来设置屏幕宽度大于指定值的样式。以下是一个示例，当屏幕宽度大于或等于 768 像素时为文本设置蓝色：

@media (min-width: 768px) {
  .text {
    color: blue;
  }
}

在这里，(min-width: 768px) 是最小值媒体查询，它检查屏幕宽度是否大于或等于 768 像素。如果是，媒体查询中的 CSS 样式将被应用于 .text 类。

总结

媒体查询最小值和最大值是一种有用的工具，可用于针对不同的设备屏幕大小为网站提供适当的 CSS 样式。我们可以将这些媒体查询作为 CSS 规则的一部分使用，以根据需要针对不同的屏幕宽度设置不同的样式。