主题
移动端项目实战（一）
本页对应 移动端项目实战，共 7 段视频，约 57 分钟。
学习目标
- 能使用
@media配合max-width、min-width编写媒体查询，实现不同设备宽度下的背景色或布局切换。 - 能按断点从小到大或从大到小的顺序书写多段媒体查询，并解释顺序错误时层叠覆盖导致样式失效的原因。
- 能在指定断点下使用
display: none隐藏页面元素，完成“窄屏隐藏侧边栏”的简单响应式效果。 - 能识别媒体查询完整写法中的媒体类型、
and、not、only及媒体特性，并说明实际开发中哪些部分可省略。 - 能使用
<link>标签的media属性按设备宽度引入不同外部 CSS 文件，并验证各断点下的引入效果。 - 能引入 Bootstrap 文件，使用栅格类快速完成简单响应式布局，并说明压缩版与非压缩版文件的区别及适用场景。
知识点
基本写法
为什么需要：响应式网页要让不同设备宽度呈现不同效果，媒体查询就是先“查询”设备宽度，再决定用哪套样式。
怎么想：不要写成“宽度等于 768 才生效”的单点判断，而要描述一个范围。转写稿里反复出现的“外的事/卖卖”就是 max-width，“命语为”就是 min-width。
怎么做：max-width 表示最大宽度，即小于等于；min-width 表示最小宽度，即大于等于。简写形式是 @media (max-width: 768px) { ... }。调试时拖动浏览器窗口，观察颜色或布局是否在临界值变化。
易错点：把媒体查询写成只对某一个宽度生效，而不是范围；把 max-width 和 min-width 的方向记反。
书写顺序
为什么需要：真实页面往往有多个断点，如 768、992、1200。若顺序混乱，后面的规则可能覆盖前面的规则。
怎么想：min-width 从小到大写，max-width 从大到小写。转写稿的例子是：默认灰色，min-width:768px 粉色，min-width:992px 绿色，min-width:1200px 天蓝。
怎么做：按 768 → 992 → 1200 依次书写。调试时故意把大断点放前面，会发现大屏也满足小断点条件，后写的规则把前面的层叠覆盖了。
易错点：一会儿跳一个断点、不按顺序写；误以为规则没生效，其实是权重相同后被层叠覆盖。
案例-左侧隐藏
为什么需要：像淘宝、京东这类页面，屏幕变窄时左侧区域放不下，可以直接隐藏，这是最简单常见的响应式处理。
怎么想：先搭左右布局，再在 max-width: 768px 时把左侧 display:none。转写稿强调：小于等于 768 用最大宽度描述。
怎么做：HTML 结构如下：
html
<div class="box">
<div class="left">left</div>
<div class="main">
响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
</div>
</div>CSS 样式如下：
css
.box {
display: flex;
}
.left {
width: 300px;
height: 500px;
background-color: pink;
}
.main {
flex: 1;
height: 500px;
background-color: skyblue;
}
@media (max-width: 768px) {
.left {
display: none;
}
}易错点：忘记给 .main 写 flex:1，右侧不会自动占满；断点写成 min-width:768px，效果会变成“768 以上隐藏”，方向反了。
媒体查询-完整写法
为什么需要：简写够用，但完整写法能说明媒体查询由关键词、媒体类型、媒体特性组成，读文档时不会陌生。
怎么想：关键词有 and（并且）、only（只有）、not（除了）；媒体类型有 screen 屏幕、print 打印预览、speech 阅读器、all 所有类型；媒体特性包括 width/height、max-width/max-height、min-width/min-height、orientation。
怎么做：完整结构可理解为 @media 关键词 媒体类型 and (媒体特性) { 选择器 { 样式 } }。平时写 @media (max-width:768px) 是省略了 screen 等信息的简写。屏幕方向中竖屏是 portrait，横屏是 landscape（笔记里的 protrait 是拼写笔误）。
易错点：把 max-height、min-height 忘掉；把 only、not 当成选择器；以为完整写法必须全写，实际常用简写。
媒体查询-外部CSS
为什么需要：复杂响应式页面可能要为不同设备准备不同 CSS 文件，用外部引入比把所有规则堆在一个文件里更清晰。
怎么想：link 引入 CSS 时加 media 属性，让浏览器在满足媒体条件时才引入对应文件。转写稿的例子是：768 以下引入绿色样式，992 以上引入红色样式。
怎么做：
html
<link rel="stylesheet" href="green.css" media="(max-width: 768px)">
<link rel="stylesheet" href="red.css" media="(min-width: 992px)">调试时缩小窗口看绿色是否出现，放大到 992 以上看红色是否出现；768 到 992 之间没有匹配文件，所以可能没有对应颜色。
易错点：在 link 的 media 里写大括号；把 max-width 和 min-width 写反；忘记外部文件路径。
Bootstrap 是什么：为什么需要、怎么想、怎么做、易错点
为什么需要：做响应式网页时，如果只用媒体查询，简单效果还能写；一旦设备断点变多、布局复杂，就要为不同设备准备多套样式，费时费力。Bootstrap 是由 Twitter 开发维护的前端 UI 框架，提前写好了大量 CSS 样式，允许开发者结合一定 HTML 结构和 JavaScript，快速编写功能完善的网页及常见交互效果。
怎么想：把它理解成“已经搭好的脚手架”：常用按钮、表格、布局、组件、图标等都有现成类名，用哪个拿哪个，不必从零写样式。中文官网是：https://www.bootcss.com/。
怎么做：进入中文文档，选择 Bootstrap V5 文档，下载 Bootstrap 生产文件。下载后解压，能找到 CSS 和 JS 文件；压缩版文件更小，未压缩版结构清晰，便于查看。
易错点：不要跑到外网慢站点下载；不要只拿一个孤立文件夹而漏掉配套文件；初学先认准 V5 文档，公司项目若用旧版本，要对应查旧版文档。
引入与版心：为什么需要、怎么想、怎么做、易错点
为什么需要：Bootstrap 的类名要生效，必须先引入它的 CSS 文件；否则写 container 也不会有样式。
怎么想：先引入框架 CSS，再在 HTML 中调用类名。container 是响应式布局版心类，用来控制内容宽度并随屏幕变化。
怎么做：在页面中引入 Bootstrap CSS：
html
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">然后调用版心类：
html
<div class="container">测试</div>易错点：路径要写对，css/bootstrap.min.css 不能漏层级；类名是 container，不是自己随便起的名字；引入顺序上框架 CSS 一般放在自己的样式之前，避免覆盖关系混乱。
栅格系统：为什么需要、怎么想、怎么做、易错点
为什么需要：响应式布局需要让同一份结构在不同屏幕宽度下呈现不同列数。栅格系统就是为这种“按份数排布”服务的。
怎么想：栅格化是把整个网页宽度分成 12 等份，每个盒子占用对应份数。例如一行排 4 个盒子，每个占 3 份（12 / 4 = 3）。row 类表示行，可以让内容在一行排，本质是 flex 布局。
怎么做：体验时先写一个 row，里面放多个盒子，再配合栅格类。转写稿中的体验方式是：大屏用 col-md-4 让一行出现 4 个；屏幕变小时用 col-sm-6 变成一行 2 个；再小则继续按文档选择更小断点类。调试时拖动浏览器宽度，观察列数变化。
易错点：一行总份数不要超过 12；row 和列类要配合使用；不要死记所有类名，要按文档查断点；栅格类写错一个字母就不会按预期生效。
全局样式：按钮与表格：为什么需要、怎么想、怎么做、易错点
为什么需要：按钮、表格是页面高频元素。框架把常见外观和状态做成类名，减少重复写 CSS。
怎么想：先给基础类，再叠加语义类或尺寸类。按钮基础类是 btn，成功、警告等用 btn-success、btn-warning 等；尺寸用 btn-lg、btn-sm。表格基础类是 table，隔行变色用 table-striped，颜色类如 table-success。
怎么做：按文档复制结构，在元素上添加对应类名；表格先写 table，需要条纹再加 table-striped。调试时逐个添加类名观察变化。
易错点：不要只写 success 而漏掉 btn- 或 table- 前缀；按钮尺寸类要和 btn 一起用；表格颜色类不是替代 table 基础类。
组件与字体图标：为什么需要、怎么想、怎么做、易错点
为什么需要：轮播图、导航等组件交互较多，自己写成本高；字体图标比图片图标更轻便、易改颜色和大小。
怎么想：组件一般按“引入样式表 → 引入 JS 文件 → 复制结构、修改内容”使用。字体图标则先下载图标库，再放字体文件、引入 CSS、调用类名。
怎么做：组件按文档引入 CSS 和 JS 后复制结构。字体图标导航到 Extend / 图标库，安装并下载安装包，例如 bootstrap-icons-1.X.X.zip；把 fonts 文件夹复制到项目目录，网页引入 bootstrap-icons.css，再调用类名：
html
<i class="bi-android2"></i>易错点：组件忘记引入 JS 会导致交互失效；字体图标只引 CSS 不放 fonts 会显示方框；图标类名要查文档，不要凭感觉拼。
课件图示
代码示例
示例 1：媒体查询 —— 小于等于 768px 隐藏左侧区域
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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
display: flex;
}
.left {
width: 300px;
height: 500px;
background-color: pink;
}
.main {
flex: 1;
height: 500px;
background-color: skyblue;
}
/* 网页宽度 <= 768px 时，隐藏左侧区域 */
@media (max-width: 768px) {
.left {
display: none;
}
}
</style>
</head>
<body>
<div class="box">
<div class="left">left</div>
<div class="main">
响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
</div>
</div>
</body>
</html>关键行与易错点
@media (max-width: 768px)：max-width表示最大宽度，即“小于等于 768px”时生效，写的是范围的上限。.box { display: flex; }+.main { flex: 1; }：左侧固定 300px，右侧自动占满剩余空间；隐藏左侧后右侧自然铺满整行。- 易错点：一定要写
<meta name="viewport" ...>，否则手机上媒体查询按 980px 左右的默认视口计算，效果出不来。 - 易错点：不要写成
@media (width: 768px)，那是“只有正好 768px 这一瞬间”才生效，不是范围。 display: none是“不显示、不占位置”，配合 flex 布局才能让右侧自动撑满。
示例 2：媒体查询多段书写顺序（min-width 从小到大）
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>
/* 1. 默认样式（最小设备）写在外面 */
body {
background-color: #ccc;
}
/* 2. 大于等于 768px */
@media (min-width: 768px) {
body {
background-color: pink;
}
}
/* 3. 大于等于 992px */
@media (min-width: 992px) {
body {
background-color: green;
}
}
/* 4. 大于等于 1200px */
@media (min-width: 1200px) {
body {
background-color: skyblue;
}
}
</style>
</head>
<body>
<h1>拖动浏览器宽度，观察背景色变化</h1>
</body>
</html>关键行与易错点
min-width表示最小宽度，即“大于等于”；用min-width时按从小到大写，用max-width时按从大到小写。- 默认样式写在所有媒体查询外面，作为最小设备的兜底。
- 易错点（重点）：顺序不能打乱。比如把
min-width: 1200px提到最前面，1300px 时它满足、min-width: 992px也满足，两者权重相同，后面的层叠覆盖前面的，结果会显示绿色而不是蓝色——不是没生效，是被覆盖了。 - 易错点：
min-width: 768px后面不加单位会失效，px必须写。 - 易错点：不要把“大于等于 768”误写成
max-width: 768px，max/min的意思正好相反，写反了范围就全乱了。
示例 3：Bootstrap 栅格系统快速做响应式
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 栅格系统</title>
<!-- 1. 引入 Bootstrap 的 CSS 文件（下载 Bootstrap 生产文件后解压得到） -->
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
<style>
.item {
height: 120px;
line-height: 120px;
text-align: center;
color: #fff;
background-color: orange;
}
</style>
</head>
<body>
<!-- 2. container：响应式布局版心 -->
<div class="container">
<!-- 3. row：行，让内容在一行排列（flex 布局） -->
<div class="row">
<!-- 4. 一行 4 个：每个占 3 份（12 / 4 = 3） -->
<div class="col-md-3 col-sm-6 col-12">
<div class="item">1</div>
</div>
<div class="col-md-3 col-sm-6 col-12">
<div class="item">2</div>
</div>
<div class="col-md-3 col-sm-6 col-12">
<div class="item">3</div>
</div>
<div class="col-md-3 col-sm-6 col-12">
<div class="item">4</div>
</div>
</div>
</div>
</body>
</html>关键行与易错点
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">：必须先引入 CSS，类名才有样式；路径按自己项目里解压后的实际目录写。.container：版心类，自带响应式宽度和左右内边距，内容直接放在里面即可。.row：行，内部是 flex 布局；列（col-*）必须放在 row 里面，否则间距和换行会错乱。- 栅格化是把整行分成 12 等份：
col-md-3表示中等屏及以上占 3 份（一行 4 个），col-sm-6表示小屏占 6 份（一行 2 个），col-12表示超小屏占满一行（1 个）。 - 易错点：
col-md-3里的md是断点，不是尺寸像素；不要写成col-md-3px。 - 易错点：所有列加起来超过 12 会自动换行，这是正常现象；同一行要排满，各列份数之和应为 12。
- 易错点：Bootstrap 的按钮（
btn btn-success）、表格（table table-striped）等都是“调用类名即生效”，用组件时要先引样式表、再引 JS 文件、然后复制结构改内容，漏引 JS 会导致下拉、轮播等交互失效。
常见错误
现象：多断点下颜色/布局在某个宽度区间不对，后写样式把前面覆盖了。
原因：断点没有按同一方向书写，min-width与max-width混用且跳着写，层叠结果不可控。
修法：统一“从小到大用min-width”或“从大到小用max-width”，逐级递增/递减，不跳断点。现象：要求“≤768px 隐藏左侧”却不生效，或隐藏范围变成只有 768px。
原因：把max-width/min-width语义写反，或误写成width: 768px。
修法：小于等于用max-width: 768px，大于等于用min-width: 768px；改完拖动到 767/768/769 验证边界。现象：外部 CSS 在某些宽度不生效，或两个样式文件互相覆盖。
原因：link的media区间重叠/未覆盖目标区间，或引入顺序导致后者层叠前者。
修法：先画清楚区间，再写media条件；检查link顺序，避免区间重叠和遗漏。现象：Bootstrap 栅格大屏一行 4 个，小屏不按预期变成 2 个/1 个。
原因：只写了col-md-*，没有补齐小屏类；或一行内列份数超过 12。
修法：按移动优先补col-*/col-sm-*等断点类，保持结构为row > col，每行列份数不超过 12。现象：引入 Bootstrap 后组件没有交互，或样式与文档示例不一致。
原因：只引了 CSS 未引 JS，CSS/JS 版本混用，或文件路径错误。
修法：按同一版本文档引入 CSS 与 JS（组件通常还需 JS），先查路径，再对照文档结构复制后改内容。现象：媒体查询完整写法中
only、not、and使用混乱。
原因：逻辑操作符位置和媒体类型省略规则不熟，把简写和完整写法硬拼。
修法：日常优先简写；需要完整写法时按“媒体类型 + 逻辑操作符 + 媒体特性”组织，not作用于整条查询，改完逐条验证。
练习
用媒体查询实现：默认灰色背景，
≥768px粉色，≥992px绿色，≥1200px蓝色。要求写出正确顺序，并用一句话说明打乱顺序为什么可能出错。实现左右两栏布局，要求
≤768px时隐藏左栏；再用外部 CSS 的media属性改写一版，并检查两个版本效果是否一致。用 Bootstrap 栅格实现：大屏一行 4 个盒子，中屏一行 2 个，小屏一行 1 个。写出关键 HTML 结构和类名，并说明每个断点对应哪些类。
给出下面错误代码，找出问题并修正：
css@media (min-width: 992px) { .box { background: green; } } @media (min-width: 768px) { .box { background: pink; } } @media (min-width: 1200px) { .box { background: blue; } }要求修正后断点顺序可预测，并说明层叠关系。
用 Bootstrap 做一个带字体图标的按钮，并列出你检查“样式/图标/组件交互”是否生效的三个检查点。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 媒体查询 | 11:30 |
| 2 | 书写顺序 | 08:56 |
| 3 | 隐藏 | 07:44 |
| 4 | 媒体查询完整写法了解 | 03:45 |
| 5 | 外部引入 | 08:13 |
| 6 | 体验bootstrap | 05:19 |
| 7 | bototstrap介绍 | 11:41 |
小结
- 媒体查询的核心是“区间”，不是单点；先定边界，再写规则。
- 多断点必须保持同一书写方向，靠顺序保证层叠结果可预测。
- 先写默认样式，再逐级覆盖；能用简写就不上完整写法。
- 外部 CSS 适合按设备拆整套样式，但要控制区间和引入顺序。
- Bootstrap 的价值是用类名换开发效率，栅格要按移动优先补齐断点类。
- 引入框架先查路径、版本、CSS/JS 配套，组件问题优先看文档结构。
- 响应式调试以开发者工具拖动宽度和边界值验证为主，767/768/769 这类边界要单独看。
- 简单隐藏/切换用媒体查询足够，复杂多套布局再考虑框架。