理解 CSS 媒体查询

2025-06-10

理解 CSS 媒体查询

目录

  1. 什么是 CSS 媒体查询
  2. CSS媒体查询的工作原理
  3. 示例 1
  4. 示例 2
  5. 资源

什么是 CSS 媒体查询以及它为何有用?

CSS 媒体查询使我们能够根据所应用的一些规则来控制、修改网站布局并使其具有响应性。

CSS 媒体查询如何工作?

媒体查询使用@media声明来为应用的块指定条件。如果给定的条件为真,则应用相应的规则。

CSS媒体查询有四种可能types

all /* apply to all media type devices */
print /* apply on printers */
screen /* apply on screens */
speech /* apply on speech synthesizers */
Enter fullscreen mode Exit fullscreen mode

@media type是可选的,如果我们跳过它,则all类型将默认隐含。

现在,让我们看一些如何@media根据不同的屏幕分辨率应用声明的示例。

@media screen and (min-width: 600px) {
 /* Apply when the browser is at least 600px or above */
 /* Equivalently we can write for any device */
 /* @media (min-width: 600px) */
}

@media screen and (max-width: 800px) {
 /* Apply when the browser is at maximum 800px or less */
 /* Equivalently we can write for any device */
 /* @media (max-width: 800px) */
}

@media screen and (min-width: 600px) and (max-width: 800px)
 /* Apply when the browser is from 600px to 800px */
 /* Equivalently we can write for any device */
 /* @media (min-width: 600px) and (max-width: 800px) */
}
Enter fullscreen mode Exit fullscreen mode

在下面的示例中,我们将讨论两种使用媒体查询的情况。这些示例的核心思想是导航栏项目如何随着屏幕分辨率的变化而变化和重新排列。

此外,在这些示例中,我并不太强调元素的样式,而是强调媒体查询的应用方式。您可以在已置顶的 Codepen 上查看详细代码。

示例 1

当屏幕宽度尺寸为 时800px or lessnavbar items将在一列中居中显示,而当屏幕宽度尺寸为 时600px or lessnavbar items将显示蓝色。

@media (max-width: 800px) {
    nav ul {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
        text-align: center;
    }
    nav {
        background-color: rgb(62, 109, 149);
    }
}
Enter fullscreen mode Exit fullscreen mode

示例 2

当屏幕宽度为 时800px or less,会出现一个按钮,导航栏会隐藏。
点击按钮时navbar items, 会出现在一列中;当屏幕宽度为 时600px or lessnavbar items会显示为蓝色。

@media (max-width: 800px) {
  nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  nav ul.show {
    display: flex;
  }
  .my-button {
    display: block;
  }
}

@media (max-width: 600px) {
    nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  nav ul.show {
    display: flex;
  }
  .my-button {
    display: block;
  }
  nav {
    background-color: rgb(62, 109, 149);
  }
}
Enter fullscreen mode Exit fullscreen mode

资源

鏂囩珷鏉ユ簮锛�https://dev.to/zagaris/understanding-css-media-queries-1md9
PREV
在 React.js 中获取 API 数据的 5 种方法
NEXT
每个开发人员都需要的 4 种非编码技能