深挖 CSS3 Media Query 的巧妙用法

2023-12-22 13:11:20

踏入 Web 开发世界的广大开发者们，大家好！8 月更文挑战如火如荼地进行中，今天，我将带领大家深入探索 CSS3 Media Query 的奥秘，为你揭示它的巧妙用法，助力你的前端开发如虎添翼。

响应式设计中的利器

在当今多设备互联的时代，响应式设计已成为 Web 开发的基石。Media Query 就是实现响应式设计的神兵利器，它赋予你针对不同设备屏幕尺寸、分辨率和方向定制样式的能力。

引入 Media Query

Media Query 的引入方法很简单，只需在 <head> 标签中添加 <style> 元素，并在其中编写你的查询即可：

<head>
  <style>
    @media screen and (max-width: 600px) {
      /* 针对屏幕宽度小于 600px 的样式 */
    }
  </style>
</head>

丰富的 Media Query 类型

Media Query 拥有多种类型，涵盖了从屏幕尺寸到方向的各种设备属性。以下是常用的 Media Query 类型：

max-width：指定最大屏幕宽度
min-width：指定最小屏幕宽度
max-height：指定最大屏幕高度
min-height：指定最小屏幕高度
orientation：指定设备方向（portrait 或 landscape）
resolution：指定设备分辨率

有趣的 Media Query 用法

除了基本的屏幕尺寸查询外，Media Query 还有许多有趣而实用的用法：

隐藏滚动条： ::-webkit-scrollbar { display: none; }
创建伪元素覆盖： ::after { content: "提示"; background: red; }
检测触摸事件： @media (hover: none) { ... }
查询设备类型： @media (pointer: fine) { ... }

实践案例：响应式导航栏

让我们通过一个实际案例来体验 Media Query 的强大功能：创建一个响应式导航栏。

<nav>
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
  <button id="nav-toggle">☰</button>
</nav>

/* 导航栏默认样式 */
nav {
  background: #fff;
  width: 100%;
}
nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
nav a {
  margin: 0 20px;
}

/* 响应式 Media Query */
@media screen and (max-width: 768px) {
  nav ul {
    flex-direction: column;
    align-items: flex-start;
  }
  nav a {
    margin: 0;
  }
  nav #nav-toggle {
    display: block;
  }
}