HTML媒体查询[编辑 | 编辑源代码]

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

基本概念[编辑 | 编辑源代码]

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

语法结构[编辑 | 编辑源代码]

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

@media media-type and (media-feature-rule) {
    /* CSS规则 */
}

其中：

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：检测宽高比。

代码示例[编辑 | 编辑源代码]

基本示例[编辑 | 编辑源代码]

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

/* 默认样式 */
body {
    background-color: lightblue;
}

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

输出效果：

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

多条件查询[编辑 | 编辑源代码]

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

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

实际应用案例[编辑 | 编辑源代码]

响应式导航栏[编辑 | 编辑源代码]

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

<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>

/* 默认显示导航链接 */
.nav-links {
    display: flex;
}

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

响应式网格布局[编辑 | 编辑源代码]

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

.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;
    }
}

高级用法[编辑 | 编辑源代码]

使用自定义变量[编辑 | 编辑源代码]

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

:root {
    --main-font-size: 16px;
}

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

body {
    font-size: var(--main-font-size);
}

打印样式优化[编辑 | 编辑源代码]

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

@media print {
    nav, footer {
        display: none;
    }
    body {
        font-size: 12pt;
        color: black;
    }
}

可视化断点设计[编辑 | 编辑源代码]

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

数学公式支持[编辑 | 编辑源代码]

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

$font-size = base-size + (viewport-width - min-width) \times scaling-factor$

总结[编辑 | 编辑源代码]

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

模板:CSS技术