传智播客网页设计培训 响应式手机网页制作

这套资料的主题很明确：用 HTML/CSS 加少量 JavaScript，把一个 PC 端页面改造成能在手机上正常浏览的响应式站点。它出自传智播客的网页设计培训线，属于典型的"边讲边敲"型录屏教程，配套源码和分章笔记，适合拿来当对照练手的素材，而不是当连续剧看完就完事。

技术栈与前置要求

课程用的是没有构建工具的原生三件套：HTML5 语义标签、CSS3 媒体查询、Flex 与百分比/rem 布局，交互部分靠少量原生 JS 完成移动端导航、轮播和触摸滑动。没有 Webpack、没有框架、没有预处理器，所以你不需要先补一堆工程化概念，只要能手写选择器、理解盒模型和文档流，就能跟着敲下去。

如果你已经用过 Bootstrap 之类的栅格系统，这门课的价值反而更大——它会带你拆开栅格背后的东西：断点为什么设在 768px 和 992px、box-sizing该在哪儿改、清除浮动和 BFC 各解决什么问题。自己写一遍，比调库更容易建立手感。

内容组织的两条线索

整份资料大致沿两条线推进。一条是知识线：视口 meta 的设置、移动端像素与设备像素比、媒体查询的书写顺序、移动优先与桌面优先的取舍、图片与字体的自适应、常见兼容性坑。另一条是项目线：一个完整的移动端页面从结构搭建到细节还原，包含顶部导航、焦点图、卡片列表、底部 Tab 栏这些高频模块。

值得留意的是它对"改动"的处理方式。响应式不是重写一遍，而是在既有结构上加断点、调排列、换单位，教程里会反复出现这种局部调整的过程，这部分比最终效果图更有参考价值——真实项目里的响应式改造，八成时间都花在这种缝缝补补上。

适合拿来对照实践的部分

• 媒体查询的组织方式：按模块集中写还是按断点集中写，两种写法在维护成本上的差别，跟着敲一遍能直观感受到。
• 移动端导航的交互实现：汉堡菜单的展开收起、遮罩层、滚动锁定，这几个点几乎每个移动页面都要用。
• 流式布局与弹性盒的取舍：什么时候用百分比加 padding 撑开，什么时候直接上 Flex，教程给出了具体的判断场景。
• 移动端适配单位：px、rem、vw 在同一页面里的混用规则，以及根字号动态计算的思路。
• 真机调试与视口模拟的差异：为什么模拟器里对齐的间距在手机上会偏，怎么定位这类问题。

这些模块拆出来都能直接搬进自己的项目，建议边看边把每个模块单独抽成一个可复用的片段，而不是只留下一个完整页面。

自学路径建议

不建议一口气刷完。可以按这个节奏走：先看视口与媒体查询的基础章节，自己写一个只含 header、content、footer 的三段式页面，在浏览器里拖动窗口宽度观察变化；然后进入完整项目，边看边暂停，先自己实现再对照源码找差异，差异点记下来就是你的薄弱环节；最后脱离教程，找一个现成的 PC 站点首页，尝试把它改成手机端可用的版本，这一步才算真正消化。

配套的章节笔记适合在动手卡住时回查，而不是提前通读。面试前拿它做快速回顾也可以，但前提是你手里得有一个自己改出来的响应式页面，否则笔记里的知识点仍然是别人的。

使用这份资料的注意点

教程录制有一定年份，部分写法如今已有更简洁的替代方案，比如某些场景下 Flex 或 Grid 可以直接取代浮动布局，某些前缀已经可以省略。这不影响它作为理解原理的材料，但建议在实现时主动想一想：这个写法今天还成立吗？有没有更合适的？带着这个问题看，收获会比照抄代码大得多。

另外，响应式设计本身在变，容器查询、逻辑属性这些新特性正在补上媒体查询的短板。把这套资料当成打基础的底子，再顺着 MDN 往上叠新东西，是比较稳妥的用法。