编辑“︁HTML自适应设计”︁（章节）

== 核心概念 ==

自适应设计基于以下三个核心技术：

1. '''流体网格布局'''（Fluid Grids）：使用相对单位（如百分比）而非固定单位（如像素）定义布局。
2. '''弹性媒体'''（Flexible Media）：确保图像和视频能够根据容器大小自动缩放。
3. '''媒体查询'''（Media Queries）：通过CSS检测设备特性（如屏幕宽度），并应用不同的样式规则。

=== 流体网格布局 ===

传统的固定宽度布局在移动设备上可能显示不全或需要水平滚动。流体网格通过相对单位（如百分比）定义列宽，使布局能够随屏幕尺寸变化而调整。

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 90%;
            margin: 0 auto;
        }
        .column {
            width: 30%;
            float: left;
            margin: 1.66%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">Column 1</div>
        <div class="column">Column 2</div>
        <div class="column">Column 3</div>
    </div>
</body>
</html>
</syntaxhighlight>

=== 弹性媒体 ===

图像和视频应能随容器大小缩放，避免溢出或裁剪。通过设置<code>max-width: 100%</code>，媒体元素不会超过其容器的宽度。

<syntaxhighlight lang="css">
img, video {
    max-width: 100%;
    height: auto;
}
</syntaxhighlight>

=== 媒体查询 ===

媒体查询是自适应设计的核心工具，允许根据设备特性（如屏幕宽度、方向或分辨率）应用不同的CSS规则。

<syntaxhighlight lang="css">
/* 默认样式（移动设备优先） */
body {
    font-size: 14px;
}

/* 平板设备（宽度≥768px） */
@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

/* 桌面设备（宽度≥1024px） */
@media (min-width: 1024px) {
    body {
        font-size: 18px;
    }
}
</syntaxhighlight>