CSS 媒体查询 min-width 和 max-width

在本文中，我们将介绍 CSS 中的 @media min-width 和 max-width 媒体查询的使用方法和示例。媒体查询是一种在不同屏幕尺寸和设备上应用不同样式的CSS技术。通过使用 min-width 和 max-width 来定义屏幕的最小宽度和最大宽度，我们可以根据屏幕的大小自动适应和调整页面的布局和样式。

阅读更多：CSS 教程

什么是 @media min-width 和 max-width？

@media min-width 和 max-width 是 CSS 中的媒体查询的两种常用用法。它们允许我们在不同屏幕尺寸和设备上应用不同的CSS样式。媒体查询是一个用于检测设备特征和属性的条件，从而确定应用哪种样式。

min-width 和 max-width 是媒体查询中用于定义屏幕宽度的属性。min-width 表示屏幕的最小宽度，而 max-width 则表示屏幕的最大宽度。通过设置这些属性的值，我们可以定义在不同屏幕尺寸下应用的样式。

如何使用 @media min-width 和 max-width？

在 CSS 中，我们通过 @media 规则来定义媒体查询。媒体查询会根据指定条件来选择性地应用样式。

下面是一个示例，展示了如何在不同屏幕尺寸下显示不同的文本颜色：

@media (min-width: 1024px) {
  body {
    color: red;
  }
}

@media (max-width: 480px) {
  body {
    color: blue;
  }
}

上述示例中，当屏幕宽度大于等于1024px时，文本颜色将变为红色，当屏幕宽度小于等于480px时，文本颜色将变为蓝色。这样，我们就可以根据屏幕的宽度为不同的设备提供更好的用户体验。

示例说明

在实际应用中，@media min-width 和 max-width 经常用于响应式网页设计。通过使用不同的媒体查询条件，我们可以为不同屏幕尺寸和设备调整页面的布局和样式。

假设我们有一个包含导航栏的网站，我们希望在屏幕宽度小于等于768px时，导航栏变为垂直布局，并且字体和图标的大小变小。可以使用以下代码实现：

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: center;
  }

  .navbar a {
    font-size: 14px;
  }

  .navbar .icon {
    font-size: 18px;
  }
}

在上述代码中，当屏幕宽度小于等于768px时，导航栏的 flex-direction 属性将变为 column，使得导航栏的项目垂直排列。同时，导航栏中的字体和图标的大小也会根据媒体查询的条件进行调整。

这样，无论用户在不同设备上访问网站，都可以获得最适合其屏幕的显示效果和用户体验。