副队长CSS教程(36)–移动布局与响应式

文章目录

[1. 前言](#1. 前言)
[2. viewport 视口设置](#2. viewport 视口设置)
[3. @media 媒体查询](#3. @media 媒体查询)
[4. 响应式多栏布局实战](#4. 响应式多栏布局实战)
[5. 响应式图片处理](#5. 响应式图片处理)
[6. 总结](#6. 总结)

1. 前言

随着移动端设备普及，网页需要同时适配手机、平板、电脑等不同尺寸屏幕。移动布局和响应式布局是前端页面适配的核心方案。响应式布局依靠媒体查询，根据屏幕宽度自动调整样式，一套 HTML 页面兼容多端设备。本篇讲解视口设置、媒体查询、响应式常用思路，每个代码示例前介绍实现思路。

2. viewport 视口设置

移动端浏览器默认会把页面放到虚拟视口中渲染，会造成页面缩小，文字很小。必须在 head 标签添加 viewport 元标签，让页面宽度等于设备真实宽度，禁止默认缩放，这是移动端布局的第一步。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 移动端视口配置，响应式必备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>viewport示例</title>
    <style>
        .box {
            width: 100%;
            height: 100px;
            background-color: #409eff;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="box">设置viewport后，宽度适配手机屏幕</div>
</body>
</html>

效果：

使用要点：

width=device-width：页面宽度等于设备屏幕宽度；
initial-scale=1.0：页面初始缩放比例 1，不放大缩小；
响应式页面如果缺失这一行，手机打开页面会整体缩小，布局错乱。

3. @media 媒体查询

媒体查询可以判断屏幕尺寸，在满足指定屏幕宽度条件时，加载对应的 CSS 样式。常用在断点切换布局，大屏多栏、小屏单栏。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询示例</title>
    <style>
        .content {
            height: 120px;
            background-color: #409eff;
            color: #fff;
            text-align: center;
            line-height: 120px;
            font-size: 24px;
        }
        /* 屏幕宽度小于768px（手机端） */
        @media (max-width:768px) {
            .content {
                background-color: #f56c6c;
                font-size:18px;
            }
        }
    </style>
</head>
<body>
    <div class="content">窗口缩小到768px以内，颜色字体变化</div>
</body>
</html>

当窗口宽度大于768时，效果：

当窗口宽度小于768时，效果：

使用要点：

max-width：小于等于该宽度生效；min-width：大于等于该宽度生效；
常用断点：768px（平板 / 手机分界），992px（平板大屏），1200px（桌面大屏）；
推荐采用移动优先写法，先写移动端默认样式，再用 min-width 增加大屏样式。

4. 响应式多栏布局实战

在大屏下左右两栏，屏幕缩小到手机尺寸自动变成上下单栏，使用 flex 搭配媒体查询完成，是网页最常见响应式布局方案。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式两栏布局</title>
    <style>
        .wrap {
            display: flex;
        }
        .left {
            width: 30%;
            height:140px;
            background:#409eff;
            color:#fff;
            text-align:center;
            line-height:140px;
        }
        .right {
            flex:1;
            height:140px;
            background:#67c23a;
            color:#fff;
            text-align:center;
            line-height:140px;
        }
        @media (max-width:768px) {
            .wrap {
                flex-direction: column;
            }
            .left {
                width:100%;
            }
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">左侧侧边栏</div>
        <div class="right">主内容区域</div>
    </div>
</body>
</html>

电脑屏幕（宽屏幕）时：

手机屏幕（窄屏幕）时：

使用要点：

大屏横向排列，手机端修改 flex-direction 改为纵向上下排列；
百分比、flex 弹性布局优先，尽量少写固定 px 宽度，提升适配性；
图片也需要设置 max-width:100% 防止超出屏幕。

5. 响应式图片处理

图片在移动端很容易超出屏幕，通过设置 max-width:100%，图片最大宽度不会超过父容器宽度，实现图片自适应。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式图片</title>
    <style>
        img {
            max-width:100%;
            height:auto;
        }
    </style>
</head>
<body>
    <img src="https://picsum.photos/600/300" alt="示例图片">
</body>
</html>

使用要点：

max-width:100% 限制图片最大宽度；height:auto 保持图片原始宽高比例不变，防止拉伸变形；
不推荐直接写固定 width，会导致小屏溢出。

6. 总结

移动端页面第一件事，添加 viewport 元标签，否则适配失效；
@media 媒体查询是响应式核心，可以根据屏幕宽度切换样式；
响应式布局推荐弹性 flex/Grid、百分比单位，减少固定 px；
响应式图片设置 max-width:100%，height:auto 防止溢出变形；
响应式特点：一套 HTML，多端自适应；移动优先开发思路更适合移动端项目。