网页的响应式布局（网页平板手机）
网页的响应式布局（网页平板手机）
#resource / css
#type / concept
#status / growing
网页的响应式布局（网页平板手机）
响应式是为了让页面在各种不同大小的情况中（手机端、平板端、桌面端的不同大小）都有良好的可用性。
基础概念
视口（Viewport）
视口是专门为手机端适配出现的属性，浏览器显示网页内容的区域，是响应式布局的基础，必须首先配置。
移动端不设置时，强制用默认宽（如 980px）并缩小显示，导致错乱。
- 作用：告诉手机端浏览器如何缩放页面，避免移动端默认缩放导致的布局错乱。
- 标准代码：需放在 HTML 的
<head>标签内，代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 关键参数解释：
width=device-width：让视口宽度等于设备的物理屏幕宽度（浏览器 “可用内容区域” 的宽度）。initial-scale=1.0：设置页面初始缩放比例为 1，即不缩放
核心技术：媒体查询（Media Queries）
媒体查询是实现响应式布局的“开关”，能根据屏幕条件（如宽度、分辨率）加载不同 CSS 样式。
-
基本语法：通过
@media规则定义条件，满足条件时执行内部样式。/* 当屏幕宽度 ≤ 768px 时（通常对应平板/手机），执行以下样式 */ @media (max-width: 768px) { .container { width: 90%; /* 移动端容器宽度调整为 90% */ flex-direction: column; /* 布局从横向改为纵向 */ } } -
常用判断条件：
max-width：屏幕宽度“小于等于”某个值时生效（如移动端适配）。min-width：屏幕宽度“大于等于”某个值时生效（如桌面端适配）。orientation：判断屏幕方向，portrait（竖屏）或landscape（横屏）。
核心单位：相对单位
避免使用 px（固定像素）这类绝对单位，改用相对单位，让元素尺寸随屏幕缩放。
| 单位 | 定义 | 适用场景 |
|---|---|---|
% | 相对于父元素的百分比 | 容器宽度、图片宽度（如 width: 100% 让图片占满父容器） |
em | 相对于当前元素的字体大小（默认 1em = 16px） | 字体大小、内边距（padding: 1em） |
rem | 相对于根元素（<html>）的字体大小 | 全局尺寸控制（如设置 html { font-size: 16px }，1rem = 16px） |
vw/vh | 相对于视口宽度/高度的百分比（1vw = 视口宽的 1%） | 全屏元素、响应式背景图（如 height: 100vh 让元素占满屏幕高度） |
核心布局：弹性布局与网格布局
这两种 CSS 布局模式天生支持响应式，是修改布局的主要工具。
-
Flex 弹性布局：适合一维布局（横向或纵向），如导航栏、卡片列表。
- 关键属性：
display: flex（开启弹性布局）、flex-wrap: wrap（元素超出时自动换行）。
.nav { display: flex; justify-content: space-between; /* 元素两端对齐 */ flex-wrap: wrap; /* 屏幕变窄时导航项自动换行 */ } - 关键属性：
-
Grid 网格布局：适合二维布局（行列同时控制），如首页板块、表单布局。
- 关键属性：
display: grid（开启网格布局）、grid-template-columns（定义列数）。
.card-container { display: grid; /* 桌面端 3 列，移动端自动 1 列（配合媒体查询） */ grid-template-columns: repeat(3, 1fr); gap: 20px; /* 卡片间距 */ } - 关键属性：
解决方案
实战经验
左侧边栏+右边主要内容 的布局比较适合多端响应式：
- 桌面端（固定宽度 + 可折叠）
- 平板端（自适应宽度 + 自动折叠）
- 移动端（完全折叠 + 弹窗式展开，通过汉堡菜单触发）
- mlc training 页面的响应式，直接分为桌面（按钮平铺）和非桌面（按钮放到 draw 组件内部）
- 最外侧侧边栏和顶部导航栏的响应式
- contrainerWrapper组件的响应式
- knowledge base 页面、orientation页面、 journey页面、journeyDetail、mycenter 页面的响应式