宁皓网响应式网站设计（三六五网络学院收集36课）

这套响应式网站设计课程来自宁皓网，共 36 课，主题很集中：把「一个页面在手机、平板、桌面三种宽度下都能正常显示」这件事从头做一遍。它不讲空泛的设计理论，而是围绕 HTML 结构、CSS 布局、媒体查询和图片适配这几块展开，比较适合已经能写基础 HTML/CSS、但一遇到多端适配就靠调数值试错的人拿来对照练习。

技术栈与前提

课程不依赖任何前端框架，核心就是原生 CSS。重点会落在几个具体能力上：用 viewport 元标签控制移动端渲染宽度、用相对单位和百分比替代固定 px、用 max-width 约束容器、用媒体查询在断点处改写布局。如果你之前只写过固定宽度 960px 的页面，这套内容能帮你把「为什么手机上要横向滚动」这类问题一次理清。开始之前需要能独立写出一个静态页面，看懂选择器和盒模型即可，不需要 JavaScript 基础，也不需要构建工具。

结构安排与学习节奏

整体是按「概念—局部—整页」推进的。前面几节解决视口、弹性图片、断点设置这类基础问题，中间进入导航、栅格、卡片列表这些常见模块的响应式写法，最后串成一个完整页面。36 课的量不算大，每节基本围绕一个小目标，适合一次看两三节然后立刻动手改。建议的用法是：看一节，关掉视频自己写一遍同样的结构，再对着原始代码找差异。媒体查询那几节可以反复看，断点数值和布局切换的判断逻辑是后面所有模块的基础，这里含糊，后面会一直卡。

可以复用的模块

从工程角度看，这门课真正值钱的是几个能直接搬进项目的片段：一套折叠式导航栏的写法（窄屏收起、宽屏展开）、一个不依赖框架的简易栅格、一组能在不同宽度下自动换行的卡片容器，以及图片和背景图的适配处理方式。这些模块之间耦合度低，你可以只取其中一个放进现有项目，不必整套照搬。页面的组织方式也值得留意——容器、行、列的分工比较清楚，改起来不会牵一发动全身，这种结构意识比记住某条具体属性更有用。

怎么把它用起来

不要只看不写。响应式的问题大多出在细节上：盒模型的宽度计算、图片在容器里的溢出、断点切换时的跳动，这些只有自己敲一遍才会暴露。可以给自己定一个小目标：选一个已有的桌面端页面，用课程里的方法把它改成三档适配，再拿真机或者浏览器的设备模拟实测一遍。遇到对不上的地方回到对应章节，比按顺序刷完更有效。整套资料更适合当参考手册随时翻，而不是从头到尾看一遍就结束。

适合谁，不适合谁

它适合需要补上多端适配这块基础的页面开发者，也适合想理解 CSS 布局本质、不想被框架封装挡住视线的人。但如果你已经在用成熟的 UI 组件库处理响应式，或者目标是学 React、Vue 这类框架的工程化方案，这门课提供的增量会比较有限。把它当作一份可对照的实战素材，动手改、动手拆，收益比单纯看完 36 课大得多。