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

== 核心概念 ==

响应式设计基于以下三个核心原则：

1. '''流体网格布局'''（Fluid Grid Layout）：使用相对单位（如百分比）而非固定单位（如像素）来定义布局，使元素能够根据屏幕尺寸动态调整。
2. '''弹性图片'''（Flexible Images）：确保图片和其他媒体能够按比例缩放，避免超出其容器范围。
3. '''媒体查询'''（Media Queries）：通过CSS检测设备特性（如屏幕宽度、分辨率），并应用不同的样式规则。

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

传统的固定布局使用像素（px）作为单位，而流体网格布局使用百分比（%）或视口单位（vw/vh）来定义宽度和间距。例如：

<syntaxhighlight lang="css">
.container {
  width: 90%; /* 占据父容器的90% */
  margin: 0 auto; /* 居中显示 */
}

.column {
  width: 30%; /* 占据容器的30% */
  float: left;
  margin: 1%;
}
</syntaxhighlight>

=== 弹性图片 ===

为了防止图片超出容器范围，可以使用以下CSS规则：

<syntaxhighlight lang="css">
img {
  max-width: 100%; /* 图片最大宽度不超过容器 */
  height: auto; /* 高度自动调整，保持比例 */
}
</syntaxhighlight>

=== 媒体查询 ===

媒体查询是响应式设计的核心工具，允许根据设备特性加载不同的CSS规则。例如：

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

/* 屏幕宽度大于600px时应用 */
@media (min-width: 600px) {
  body {
    font-size: 16px;
  }
}

/* 屏幕宽度大于900px时应用 */
@media (min-width: 900px) {
  body {
    font-size: 18px;
  }
}
</syntaxhighlight>