媒体查询代码：CSS媒体查询代码，实现响应式设计的必备技能

来源：网络作者：日期：2025-11-14 14:32:43

在现代网页设计中,响应式布局已成为标准实践，无论用户使用手机、平板还是桌面显示器，网站都能自动调整布局以提供最佳体验，而实现这一目标的核心技术之一就是CSS媒体查询代码，本文将深入探讨媒体查询的工作原理、语法结构以及实际应用。

什么是媒体查询？

媒体查询是CSS3引入的一项强大功能,允许开发者根据设备特性（如屏幕宽度、分辨率、色彩深度等）应用不同的样式规则，通过媒体查询，我们可以为不同类型的设备定制页面布局，确保内容在各种屏幕上都能完美展示。

媒体查询的基本语法

媒体查询的基本结构如下：

媒体查询代码：CSS媒体查询代码，实现响应式设计的必备技能

@media 媒体类型 and | not | only (媒体特性) {
  CSS样式规则;
}

媒体特性可以是设备的宽度、高度、分辨率、色彩能力等。

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

上述代码表示：当屏幕宽度小于或等于768px时，应用内部的样式规则。

常用媒体特性

宽度和高度：width、height、min-width、max-width等
屏幕方向：orientation（值为portrait或landscape）
分辨率：resolution
色彩能力：color-depth、color-index
设备类型：screen、print、speech等

实际应用示例

以下是一个完整的响应式导航栏示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 默认样式 */
    .navbar {
      display: flex;
      justify-content: space-between;
      padding: 10px;
    }
    .nav-links {
      display: flex;
      list-style: none;
    }
    .nav-links li {
      margin-left: 20px;
    }
    /* 当屏幕宽度小于768px时应用此样式 */
    @media (max-width: 768px) {
      .nav-links {
        display: none;
      }
      .menu-toggle {
        display: block;
      }
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="menu-toggle">☰</div>
    <ul class="nav-links">
      <li>首页</li>
      <li>lt;/li>
      <li>服务</li>
      <li>联系</li>
    </ul>
  </nav>
</body>
</html>