编辑“︁HTML媒体查询”︁（章节）

= HTML媒体查询 =

'''HTML媒体查询'''（Media Queries）是[[CSS3]]模块的一部分，允许开发者根据设备的特性（如屏幕宽度、高度、分辨率、方向等）应用不同的样式规则。它是实现'''响应式网页设计'''（Responsive Web Design, RWD）的核心技术之一，确保网页在不同设备上都能提供良好的用户体验。

== 基本概念 ==

媒体查询通过检查设备的物理特性来决定是否应用特定的CSS规则。其语法基于逻辑表达式，可以组合多个条件，从而实现灵活的布局调整。

=== 语法结构 ===

媒体查询的基本语法如下：

<syntaxhighlight lang="css">
@media media-type and (media-feature-rule) {
    /* CSS规则 */
}
</syntaxhighlight>

其中：
* '''media-type'''：指定设备类型（如`screen`、`print`、`all`等）。
* '''media-feature-rule'''：定义具体的条件（如`min-width`、`max-width`、`orientation`等）。

== 常用媒体特性 ==

以下是一些常用的媒体特性：

* '''width'''、'''min-width'''、'''max-width'''：基于视口宽度。
* '''height'''、'''min-height'''、'''max-height'''：基于视口高度。
* '''orientation'''：检测设备方向（`portrait`或`landscape`）。
* '''resolution'''：检测屏幕分辨率（如`dpi`或`dppx`）。
* '''aspect-ratio'''：检测宽高比。

== 代码示例 ==

=== 基本示例 ===

以下代码展示了如何根据屏幕宽度调整背景颜色：

<syntaxhighlight lang="css">
/* 默认样式 */
body {
    background-color: lightblue;
}

/* 当屏幕宽度小于等于600px时应用此样式 */
@media screen and (max-width: 600px) {
    body {
        background-color: lightgreen;
    }
}
</syntaxhighlight>

'''输出效果：'''
* 在宽度大于600px的设备上，背景为浅蓝色（`lightblue`）。
* 在宽度小于等于600px的设备上，背景变为浅绿色（`lightgreen`）。

=== 多条件查询 ===

媒体查询支持逻辑运算符（如`and`、`not`、`or`），以下示例结合了多个条件：

<syntaxhighlight lang="css">
/* 适用于横向放置的平板设备 */
@media screen and (min-width: 768px) and (orientation: landscape) {
    body {
        font-size: 18px;
    }
}
</syntaxhighlight>

== 实际应用案例 ==

=== 响应式导航栏 ===

一个常见的应用是创建响应式导航栏，在小屏幕上折叠为汉堡菜单：

<syntaxhighlight lang="html">
<nav>
    <div class="menu-icon">☰</div>
    <ul class="nav-links">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系</a></li>
    </ul>
</nav>
</syntaxhighlight>

<syntaxhighlight lang="css">
/* 默认显示导航链接 */
.nav-links {
    display: flex;
}

/* 在小屏幕上隐藏链接，显示菜单图标 */
@media screen and (max-width: 600px) {
    .nav-links {
        display: none;
    }
    .menu-icon {
        display: block;
    }
}
</syntaxhighlight>

=== 响应式网格布局 ===

使用媒体查询调整网格列数：

<syntaxhighlight lang="css">
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* 在平板设备上改为2列 */
@media screen and (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 在手机上改为1列 */
@media screen and (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}
</syntaxhighlight>

== 高级用法 ==

=== 使用自定义变量 ===

结合CSS变量（Custom Properties）可以更灵活地管理响应式设计：

<syntaxhighlight lang="css">
:root {
    --main-font-size: 16px;
}

@media screen and (min-width: 1200px) {
    :root {
        --main-font-size: 18px;
    }
}

body {
    font-size: var(--main-font-size);
}
</syntaxhighlight>

=== 打印样式优化 ===

媒体查询也可用于优化打印效果：

<syntaxhighlight lang="css">
@media print {
    nav, footer {
        display: none;
    }
    body {
        font-size: 12pt;
        color: black;
    }
}
</syntaxhighlight>

== 可视化断点设计 ==

使用Mermaid绘制常见的响应式断点：

<mermaid>
graph LR
    A[移动设备 < 576px] --> B[平板 576px-768px]
    B --> C[桌面 768px-992px]
    C --> D[大桌面 > 992px]
</mermaid>

== 数学公式支持 ==

在某些情况下，可能需要计算响应式尺寸。例如，根据视口宽度动态调整字体大小：

<math>
\text{font-size} = \text{base-size} + (\text{viewport-width} - \text{min-width}) \times \text{scaling-factor}
</math>

== 总结 ==

HTML媒体查询是实现响应式设计的强大工具，允许开发者创建适应不同设备的网页。通过合理使用断点和条件，可以确保用户体验在各种屏幕上保持一致。初学者应从简单的宽度查询开始，逐步掌握多条件和高级用法。

{{CSS技术}}

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML响应式设计]]