第 4 周：CSS3、移动端与响应式

本周目标

本周完成后，应能够：

• 使用变换、过渡和关键帧动画实现基础视觉效果
• 解释移动端视口、物理像素、CSS 像素和二倍图
• 使用 rem 或 vw 完成移动端页面适配
• 使用 Less 的变量、嵌套、运算和导入组织样式
• 使用媒体查询处理手机与桌面布局差异
• 理解 Bootstrap 栅格的基本思想，但不依赖它完成阶段项目
• 独立完成一个无横向滚动的响应式页面

学习资料与范围

• 主课程：HTML5+CSS3+移动 Web 视频教程
• 视频范围：P131-P200

视频中的 3D、移动端和响应式案例只用于理解知识点，不要求下载课程素材或还原案例。练习统一选用官网蓝湖设计图中的文字、图片、图标和页面模块。

需要掌握的知识点

变换、过渡与动画

• translate、rotate、scale、skew
• transform-origin 和多重变换的执行顺序
• 使用平移实现未知尺寸元素居中
• 线性渐变和径向渐变
• 3D 视距、空间旋转和立体呈现
• @keyframes 与 animation 常用属性
• 过渡和动画的区别及适用场景

移动端基础

• 屏幕分辨率、物理像素和 CSS 像素
• 视口的概念和标准 viewport 配置
• 二倍图的使用原因和显示方式
• 固定宽度、rem、vw/vh 和响应式方案的差异
• 移动端固定头部、内容避让和点击区域
• 图片在不同屏幕下保持比例的方法

rem、vw/vh 与 Less

• rem 相对于根元素字号的计算方式
• 使用媒体查询改变根元素字号
• flexible 适配方案的基本原理
• vw/vh 与视口尺寸的换算
• Less 变量、嵌套、运算、导入和导出
• 将设计稿尺寸转换为 rem 或 vw 的思路

响应式布局

• 媒体查询的条件和常见断点思路
• 不同宽度下的显示、隐藏、换行和列数变化
• 移动优先与桌面优先的基本区别
• Bootstrap 容器、栅格、断点、全局样式和组件
• 不依赖框架使用原生 CSS 实现响应式布局

必做练习

1. 从蓝湖官网中选择图片卡片和图标，完成缩放、旋转或悬停过渡练习。
2. 使用蓝湖官网的导航内容完成变换练习；设计图未要求 3D 效果时，只在独立练习文件中验证属性。
3. 选取蓝湖官网的一个页面，使用其内容和资源制作移动端适配练习。
4. 使用蓝湖官网的卡片或列表，分别练习 rem 和 vw 两种尺寸换算方式。
5. 使用媒体查询让蓝湖官网中的导航或卡片区域适配手机与桌面宽度。
6. 使用原生 CSS 完成蓝湖官网页面的响应式练习，不使用 Bootstrap。

本周综合任务

使用官网蓝湖设计图中的导航、Banner 和卡片内容，完成一个响应式练习页面。

要求：

• 至少适配手机和桌面两类宽度
• 使用原生 CSS，不使用 Bootstrap
• 页面文字、图片和图标使用蓝湖设计图及其导出资源
• 手机端和桌面端均无意外横向滚动
• 图片比例稳定，文字不遮挡、不溢出
• 卡片列数能随可用宽度合理变化
• 动画只用于必要反馈，不影响内容阅读

本周产出

• 使用蓝湖图片、图标完成的变换与动画练习组件
• 使用蓝湖页面内容完成的 rem 和 vw 适配练习
• 使用蓝湖页面内容完成的媒体查询练习
• 官网蓝湖设计图响应式练习页面
• 一份移动端适配方案对比笔记

完成检查

• 已完成课程 P131-P200
• 能够使用变换、过渡和关键帧动画
• 能够说明视口和二倍图的作用
• 能够使用 rem 或 vw 完成移动端布局
• 能够编写基础媒体查询
• 已独立完成响应式介绍页