编辑“︁HTML响应式设计概述”︁（章节）

== 核心概念 ==

=== 1. 视口（Viewport） ===
视口是用户在网页上可见的区域。响应式设计的第一步是确保视口适配不同设备宽度。HTML5引入了'''<code><meta name="viewport"></code>'''标签来控制视口行为：

<syntaxhighlight lang="html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</syntaxhighlight>

* '''width=device-width'''：将视口宽度设置为设备宽度。
* '''initial-scale=1.0'''：设置初始缩放比例为1（不缩放）。

=== 2. 媒体查询（Media Queries） ===
媒体查询是CSS3的功能，允许根据设备特性（如屏幕宽度、分辨率）应用不同的样式规则。语法如下：

<syntaxhighlight lang="css">
/* 默认样式（移动设备优先） */
body {
    background-color: lightblue;
}

/* 平板设备（768px及以上） */
@media (min-width: 768px) {
    body {
        background-color: lightgreen;
    }
}

/* 桌面设备（1024px及以上） */
@media (min-width: 1024px) {
    body {
        background-color: lightyellow;
    }
}
</syntaxhighlight>

=== 3. 弹性布局（Flexible Grids） ===
使用相对单位（如百分比、<code>rem</code>、<code>vw</code>）替代固定单位（如像素），使布局随视口变化而伸缩。例如：

<syntaxhighlight lang="css">
.container {
    width: 100%; /* 占满父容器 */
    max-width: 1200px; /* 最大宽度限制 */
    margin: 0 auto; /* 居中 */
}

.column {
    width: 50%; /* 在父容器中占50% */
    float: left;
}
</syntaxhighlight>

=== 4. 弹性媒体（Flexible Media） ===
确保图像和视频等媒体元素随容器缩放：

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