跳到主要内容

第二节 自适应基础应用

在现代 Web 开发中，用户访问网页的设备尺寸多种多样（如宽屏电脑、笔记本、平板、手机等）。自适应设计（Responsive Web Design）的核心目标，就是让同一个网页在不同尺寸的屏幕上都能呈现出合理的布局与良好的阅读体验。

一、打开调试模式与 AI 辅助​

在进行自适应开发时，我们需要配合浏览器的“开发者工具”（按 F12 键或右键选择“检查”），点击界面上的“切换设备工具栏”图标，来模拟手机或平板的屏幕尺寸，实时查看页面的自适应效果。 同时，AI辅助工具可以帮助你深入理解 CSS 样式的含义和用法。通过输入具体的样式或代码片段，你可以快速获取该属性在自适应布局中的作用，甚至让 AI 帮你生成特定屏幕尺寸下的适配代码，从而大幅提升查错与开发的效率。

二、CSS 媒体查询​

媒体查询（Media Queries）是实现网页自适应的“灵魂”。它允许前端开发者根据设备的不同特征（最常用的是屏幕宽度）来应用不同的 CSS 样式规则。 通过这种方式，我们可以为 PC 端编写一套基础样式，再通过 @media 为移动端编写覆盖样式，实现布局的灵活切换。

@media (max-width: 960px) {

}

三、模块居中与最大宽度​

为了让网页内容在超大宽屏显示器上不至于过度拉伸，而在小屏幕上又能完整显示，我们通常会为网页主体设定一个安全的容器（版心），并使其始终保持水平居中。

.container {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}

编码规范提示： 如果感觉 container（容器）这个单词较长难以记忆，在实际项目开发中，也可以使用业界约定俗成的其他类名，如 row、box、wrap 等，保持团队内部统一即可。

四、响应式图片处理​

在网页中插入一张尺寸较大的图片时，如果不加限制，图片在手机端往往会撑破父元素的宽度，导致页面布局错乱并出现难看的横向滚动条。我们需要通过 CSS 对图片进行自适应处理。 首先，在 HTML 的 <main> 标签内添加一张图片：

<p class="aboutimg">
    <img src="图片地址" alt="图片名称" style="display: block; margin: 0 auto;">
</p>

接着，针对 PC 端设置图片的最大显示尺寸并使其居中：

.aboutimg {
    text-align: center;
}

.aboutimg img {
    max-width: 600px;
}

最后，利用媒体查询，设置手机端（小屏幕）下的图片显示逻辑：

@media (max-width: 960px) {
    .aboutimg img {
        width: 90%;
    }
}