【尚硅谷】HTML5前端项目- 谷粒音乐 - 带源码课件

移动端布局的基础陷阱与解法

前端开发中，PC 端页面的样式在移动端经常出现错位、字体忽大忽小、或者用户缩放导致布局崩坏的问题。这份资料聚焦于 HTML5 移动端项目实战，核心解决的正是从标准流布局向移动端适配方案转型过程中的底层原理盲区。课程不只教怎么写代码，更着重讲解像素理论、视口（Viewport）机制以及 rem 单位适配体系。通过还原一个真实的音乐播放类 App 前端项目，把抽象的浏览器渲染机制转化为具体的工程实践，帮助开发者理解为什么同样的 px 在不同设备上表现不同，以及如何通过 meta 标签和 JavaScript 动态计算来锁定视觉一致性。

知识结构与自学路径

资料结构遵循由浅入深的认知逻辑。建议初学者先重点攻克前几个章节，彻底搞懂物理像素与逻辑像素的区别，以及 UA 视口、布局视口和视觉视口的三层关系。这是后续所有适配方案的基石。随后进入 rem 适配的核心环节，学习如何通过获取视口宽度并动态设置根字体大小，实现元素的等比缩放。这一过程不仅涉及 CSS 写法的变更，更要求掌握基础的 DOM 操作能力。对于有一定基础的开发者，可以跳过基础概念讲解，直接对照项目源码，分析 rem 适配脚本在真实项目中的注入时机与边界条件处理。视频讲解配合源码，能让你看到每一个适配细节背后的代码落地形态，而非停留在理论层面。

实战产出与资料配合

学完这套内容，你将能够独立开发符合移动端规范的响应式页面，解决主流移动设备上的布局兼容性问题，并能针对各类屏幕尺寸编写健壮的适配脚本。建议采用“先看原理，再拷代码，后改需求”的学习方式。首先观看关于视口和像素的理论讲解，建立心智模型；接着下载源码，在本地环境运行项目，观察不同屏幕尺寸下的渲染效果；最后尝试修改项目中的关键参数，比如调整基准字号或更改媒体查询断点，验证自己对适配机制的理解。这种对照源码的实践方式，能确保你将理论知识真正转化为可复用的工程能力，避免只会看视频却无法动手写适配代码的通病。

HTML5前端项目-谷粒音乐 - 带源码课件 ├── 01_尚硅谷_谷粒音乐_简介.wmv ├── 02_尚硅谷_谷粒音乐_移动价值链.wmv ├── 03_尚硅谷_谷粒音乐__像素理论.wmv ├── 04_尚硅谷_谷粒音乐__像素理论.wmv ├── 05_尚硅谷_谷粒音乐__视口理论.wmv ├── 06_尚硅谷_谷粒音乐_如何获取三个视口的宽度.wmv ├── 07_尚硅谷_谷粒音乐_用户放大&缩小.wmv ├── 08_尚硅谷_谷粒音乐_系统放大&缩小.wmv ├── 09_尚硅谷_谷粒音乐_三个注意点.wmv ├── 10_尚硅谷_谷粒音乐_viewport的meta标签.wmv ├── 11_尚硅谷_谷粒音乐等比问题.wmv ├── 12_尚硅谷_谷粒音乐_复习.wmv ├── 13_尚硅谷_谷粒音乐_rem适配.wmv ├── 14_尚硅谷_谷粒音乐_rem适配.wmv ├── 15_尚硅谷_谷粒音乐_viewport适配.wmv ├── 16_尚硅谷_谷粒音乐_一物理像素.wmv ├── 17_尚硅谷_谷粒音乐_ie6最小高度问题.wmv ├── 18_尚硅谷_谷粒音乐_移动端事件基础.wmv ├── 19_尚硅谷_谷粒音乐_移动端事件基础.wmv ├── 20_尚硅谷_谷粒音乐_移动端事件基础.wmv ├── 21_尚硅谷_谷粒音乐_移动端常见问题.wmv ├── 22_尚硅谷_谷粒音乐_移动端常见问题_复习.wmv ├── 23_尚硅谷_谷粒音乐无缝滑屏基本布局.wmv ├── 24_尚硅谷_谷粒音乐_无缝滑屏基本逻辑.wmv ├── 25_尚硅谷_谷粒音乐_定位版本.wmv ├── 26_尚硅谷_谷粒音乐_2d版本.wmv ├── 27_尚硅谷_谷粒音乐_css组件.wmv ├── 28_尚硅谷_谷粒音乐_无缝组件版.wmv ├── 29_尚硅谷_谷粒音乐_自动轮播的组件版.wmv ├── 30_尚硅谷_谷粒音乐__复习.wmv ├── 31_尚硅谷_谷粒音乐__音乐tai骨架搭建.wmv ├── 32_尚硅谷_谷粒音乐__音乐tai头部布局.wmv ├── 33_尚硅谷_谷粒音乐_音乐tai头部遮罩布局.wmv ├── 34_尚硅谷_谷粒音乐_音悦tai头部遮罩js.mp4 ├── 35_尚硅谷_谷粒音乐_音悦tai可拖拽导航布局.wmv ├── 36_尚硅谷_谷粒音乐_音悦tai可拖拽导航-橡皮筋js.wmv ├── 37_尚硅谷_谷粒音乐_复习.wmv ├── 38_尚硅谷_谷粒音乐_快速滑屏.wmv ├── 39_尚硅谷_谷粒音乐_快速滑屏-橡皮筋.wmv ├── 40_尚硅谷_谷粒音乐_优化手动滑屏橡皮筋.wmv ├── 41_尚硅谷_谷粒音乐_解决橡皮筋间的冲突.wmv ├── 42_尚硅谷_谷粒音乐_引入无缝滑屏&抽象可拖拽导航.wmv ├── 43_尚硅谷_谷粒音乐_补充知识.wmv ├── 44_尚硅谷_谷粒音乐_防抖动.wmv ├── 45_尚硅谷_谷粒音乐_事件委托.wmv ├── 46_尚硅谷_谷粒音乐__复习.wmv ├── 47_尚硅谷_谷粒音乐__tap布局.wmv ├── 48_尚硅谷_谷粒音乐__tap布局.wmv ├── 49_尚硅谷_谷粒音乐__基本滑屏逻辑.wmv ├── 50_尚硅谷_谷粒音乐__tap滑屏逻辑.wmv ├── 51_尚硅谷_谷粒音乐__tap滑屏逻辑.wmv ├── 52_尚硅谷_谷粒音乐__小绿的实现.wmv ├── 53_尚硅谷_谷粒音乐_复习.wmv ├── 54_尚硅谷_谷粒音乐_存值存址.wmv ├── 55_尚硅谷_谷粒音乐_3d硬件加速.wmv ├── 56_尚硅谷_谷粒音乐_重绘重排.wmv ├── 57_尚硅谷_谷粒音乐_竖向滑屏.wmv ├── 58_尚硅谷_谷粒音乐_竖向滑屏（即点即停）.wmv ├── 59_尚硅谷_谷粒音乐_竖向滑屏（滚动条）.wmv ├── 60_尚硅谷_谷粒音乐_竖向滑屏（滚动条）.wmv ├── 61_尚硅谷_谷粒音乐_tai(滚动条).mp4 ├── 62_尚硅谷_谷粒音乐_apk打包.wmv └── code.zip