编辑“︁CSS分辨率适配”︁（章节）

== 核心适配技术 ==

=== 1. 使用视口（Viewport） ===
通过HTML的`<meta>`标签设置视口，确保网页在不同设备上正确缩放：

<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） ===
媒体查询允许根据设备特性（如分辨率、屏幕宽度）应用不同的CSS样式：

<syntaxhighlight lang="css">
/* 默认样式 */
body {
    font-size: 16px;
}

/* 高分辨率适配 */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
    body {
        font-size: 18px; /* 增大字体以提高可读性 */
    }
}
</syntaxhighlight>

=== 3. 图像适配 ===
为高分辨率设备提供更高清的图像：

==== 使用`srcset`和`sizes` ====
<syntaxhighlight lang="html">
<img src="image-default.jpg" 
     srcset="image-highres.jpg 2x" 
     alt="示例图像">
</syntaxhighlight>

* `2x`表示图像适用于2倍像素密度的设备。

==== 使用CSS的`image-set` ====
<syntaxhighlight lang="css">
.hero-image {
    background-image: image-set(
        "image-default.jpg" 1x,
        "image-highres.jpg" 2x
    );
}
</syntaxhighlight>

=== 4. 相对单位与弹性布局 ===
使用相对单位（如`rem`、`vw`、`vh`）和弹性布局（Flexbox/Grid）确保元素按比例缩放：

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

.text {
    font-size: clamp(1rem, 2vw, 1.5rem); /* 动态调整字体大小 */
}
</syntaxhighlight>