Terrarium 项目 CSS 重构实战以 Flexbox 或 CSS Grid 取代绝对定位Web-Dev-For-Beginners【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本指南对应 Web-Dev-For-Beginners 教程第三部分 Terrarium 项目第 2 课《Introduction to CSS》的课后作业CSS Refactoring Assignment核心任务是将当前基于position: absolute的 Terrarium 布局重构为Flexbox或CSS Grid现代布局体系在保持视觉一致性的前提下获得更易维护、真正响应式的设计。读完本文你将掌握一套可复用的分析现状 → 选择布局模型 → 重构 HTML/CSS → 跨浏览器与响应式测试 → 撰写重构文档的完整实战流程并理解为什么这类迁移能显著提升 CSS 的可维护性。1. 任务背景为什么要重构绝对定位本课作业的起点是你在第 1 课中基于 HTML 结构、并在第 2 课中用 CSS 完成视觉设计的 Terrarium。当前仓库中的完整解决方案样式展示了绝对定位时代的典型写法左右两个植物容器通过position: absolute被钉在视口两侧植物则依靠相对定位容器 绝对定位图片的组合实现层叠。/* 当前方案绝对定位的关键代码节选自 solution/style.css */ .container { background-color: #eee; width: 15%; top: 0px; position: absolute; /* 从文档流中移除钉在视口边缘 */ height: 100%; padding: 10px; } #left-container { left: 0px; } #right-container { right: 0px; }对应地页面结构中左右两侧各放置了 7 个div.plant-holder每个 holder 内部是一个img.plantdiv idleft-container classcontainer div classplant-holder img classplant altplant idplant1 src./images/plant1.png / /div !-- plant2 ~ plant7 依次类推 -- /div div idright-container classcontainer !-- plant8 ~ plant14 -- /div绝对定位的局限在第 2 课 README中已有铺垫脱离文档流容器不再参与正常排版页面其余内容无法感知它们的存在后续添加页头、页脚或导航时极易互相重叠高度依赖视口top: 0、left: 0、right: 0、height: 100%都是相对视口计算的一旦屏幕尺寸或页面结构变化就需要手工调整违反 DRY 原则课程 README 甚至专门用#left-container与#right-container的重叠代码演示了 DRY 违规并示范了用共享类.container 差异化 ID来消除重复——这正是重构思维的一次预演。作业的目标就是用 Flexbox 或 CSS Grid 这类文档流友好的现代布局模型替代这套钉钉子式的定位方案。⚠️一个重要的边界仓库中第 3 课拖拽脚本通过terrariumElement.offsetTop/offsetLeft与style.top/style.left移动植物图片这意味着植物图片本身的绝对定位属于拖拽交互的一部分不应被这次重构移除。本次重构针对的是页面级布局——即左右容器与中央玻璃罐的整体排布方式而不是单株植物在 holder 内部的精确定位机制。2. Phase 1分析与规划2.1 盘点当前使用绝对定位的元素打开你自己的 Terrarium 项目逐一标记以下元素可对照仓库解决方案样式核对元素/选择器当前定位方式职责重构后的角色.container左右容器position: absolutetop: 0左右各left:0/right:0承载植物的两侧栏Flex/Grid 的两个列或行.plant-holderposition: relativeheight: 13%为内部植物建立定位上下文保留继续作为拖拽定位上下文.plantposition: absolutez-index: 2单株植物图片的层叠与缩放保留拖拽依赖见上文边界说明.jar-top/.jar-walls/.jar-bottom/.dirt/.jar-glossy-*position: absolute 百分比尺寸用纯 CSS 拼装玻璃罐收敛到中央罐区容器内部分析的重点是区分布局级绝对定位左右容器钉在视口两侧与组件内定位植物在 holder 内、玻璃罐部件在罐区内的堆叠。前者是本作业的迁移对象。2.2 选择布局方法Flexbox 还是 CSS Grid作业要求二选一对同一组元素不要混用决策依据可以从三个维度展开内容维度一侧是一维的左右两个栏 居中的罐Flexbox 的flex-direction与justify-content就能优雅解决Grid 则适合二维结构例如你需要同时控制行与列、让罐区跨行跨列。对齐需求Flexbox 擅长把一组东西排成一行/一列并控制间距如space-between均匀分布两侧栏Grid 的grid-template-columns: 1fr 3fr 1fr则能用轨道尺寸直接表达两侧等宽、中间占主体的意图。未来演进如果之后要为 Terrarium 增加工具栏、状态栏等多行结构Grid 的grid-template-areas命名区域会让结构一目了然如果只是左栏 主体 右栏的简单分栏Flexbox 更轻量。 经验法则作业核心思想内容是一维排列优先 Flexbox布局是二维平面优先 Grid两者都能实现时选你更熟悉、注释能讲清为什么的那一个——作业评分表里文档化本身就是独立维度。2.3 草拟新布局结构在动笔前先在纸上或注释里画出目标结构。例如Flexbox 方案body/#page作为纵向 flex 容器flex-direction: column主体区再用一个横向 flex 容器承载左栏 / 罐区 / 右栏Grid 方案main直接声明三列1fr 3fr 1fr左栏、罐区、右栏按顺序放入对应的三个轨道并用min-height: 100vh撑满视口。3. Phase 2实现重构3.1 在新目录创建独立版本作业要求把重构后的版本放在独立文件夹中例如terrarium-refactor/这样既能随时对照原版也便于分别截图、分别交付。目录内至少包含terrarium-refactor/ ├── index.html ├── style.css ├── images/ # 沿用原项目植物与资源 └── README.md # 重构说明文档交付物之一3.2 更新 HTML语义化 支撑所选布局重构 HTML 的要点是容器职责清晰 语义正确用header、main、section、footer划分页面大区对照仓库解决方案 index.html中的nav/header/main/footer结构左右栏保留classcontainer但删掉依赖绝对定位的id位置属性位置改由布局模型控制玻璃罐的五个部件jar-top、jar-walls、jar-glossy-long、jar-glossy-short、dirt、jar-bottom统一放入一个罐区容器如div idterrarium方便作为 Grid/Flex 的一个单元整体定位保留全部alt文本作业明确把可访问性列入技术要求img.plant的描述性 alt如 Decorative plant for terrarium是必须继承的。示例Grid 方案下的语义化骨架main idterrarium-layout section idleft-container classcontainer aria-label左侧植物选择区 !-- plant-holder / plant 结构保持不变 -- /section section idterrarium-section aria-label玻璃罐展示区 div idterrarium div classjar-top/div div classjar-walls div classjar-glossy-long/div div classjar-glossy-short/div /div div classdirt/div div classjar-bottom/div /div /section section idright-container classcontainer aria-label右侧植物选择区 !-- plant8 ~ plant14 -- /section /main3.3 重构 CSS两套候选实现作业提供了两套可直接落地的参考代码完整继承如下。Flexbox 方案整体纵向排列 主体横向分布/* Example Flexbox approach */ .terrarium-container { display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; } .plant-containers { display: flex; justify-content: space-between; width: 100%; max-width: 1200px; }在此基础上可以进一步细化.terrarium-container中的flex-direction: column让页头 → 主体 → 页脚自然纵向流动min-height: 100vh保证矮内容页面也能撑满视口.plant-containers用justify-content: space-between把左栏与右栏推向两端、罐区居中——这正是替代left: 0/right: 0的 Flexbox 等价物左右栏内部可以让.plant-holder列表自身变成一列 flexdisplay: flex; flex-direction: column用gap替代原来依赖height: 13%的粗略间距计算间距管理更精确。Grid 方案三列两行轨道 间隙控制/* Example Grid approach */ .terrarium-layout { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto 1fr; min-height: 100vh; gap: 1rem; }要点解析grid-template-columns: 1fr 3fr 1fr左栏、罐区、右栏按 1:3:1 分配宽度罐区永远占据主体两侧栏等宽——百分比的语义更直观grid-template-rows: auto 1fr第一行放页头按内容自适应第二行主体占满剩余高度gap: 1rem统一管理轨道间距替代原来散落各处的 margin 微调若追求更强的可读性可用grid-template-areas命名区域.terrarium-layout { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: header header header left jar right; min-height: 100vh; gap: 1rem; }3.4 保持视觉一致性玻璃罐部件收敛作业特别强调植物与玻璃罐必须出现在与原来相同的位置。对照解决方案样式玻璃罐原本依赖一组绝对定位的百分比部件.jar-walls { height: 80%; width: 60%; background: #d1e1df; border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; opacity: 0.5; z-index: 1; }重构时的处理策略把罐区容器如#terrarium设为position: relative且占据 Grid/Flex 的中央轨道让这些百分比部件从相对视口定位变为相对罐区容器定位。由于相对父容器定位与绝对定位的计算基准一致罐子的形状、比例与透明度效果可以原样保留但整体位置由布局模型决定——这就是用现代布局管排布、用相对定位管内部堆叠的分工。校验一致性的快捷方法在两种方案下分别截图并逐像素对比罐子轮廓与植物分布只要左右栏的宽度比原方案15% 15%对应 Grid 的1fr : 3fr : 1fr与罐区尺寸原方案width: 60%保持等价视觉即可基本对齐。3.5 响应式用相对单位替代固定像素作业的技术要求是使用rem、em、%、vw、vh等相对单位而不是固定像素。这一点仓库源码本身就是范本——解决方案样式中的罐子部件全部使用百分比尺寸与rem圆角。重构时继续贯彻字体与圆角用rem跟随根字号尊重用户字体设置栏宽、罐宽用%或fr全屏容器用vh/vw或min-height: 100vh间距优先gap/rem避免px写死。真正的响应式还需要在断点处调整轨道结构。例如 Grid 方案在小屏下从三列退化为单列纵向堆叠media (max-width: 768px) { .terrarium-layout { grid-template-columns: 1fr; grid-template-areas: header jar left right; } }4. Phase 3测试与文档4.1 跨浏览器测试作业要求的设计在以下浏览器环境中验证并保留截图证据浏览器版本要求Chrome / Edge最新 2 个主版本Firefox最新 2 个主版本Safari最新 2 个主版本移动端浏览器iOS Safari、Chrome Mobile验证手段包括浏览器 DevTools 的设备模拟模式以及真实设备/云真机进行复核用 Can I Use 类工具确认所用特性的支持矩阵本作业用到的flex、grid、gap、media均为现代浏览器广泛支持的稳定特性重点核对的是老旧 Safari 下gap在 Flex 中的表现差异。若发现细微差异如 Safari 对gap的兼容问题记录并写入 README——作业评分明确认可文档化的小差异。4.2 响应式测试在以下三个断点规格上逐一检查布局桌面1920 × 1080三栏完整呈现平板768 × 1024三栏压缩或降为两栏/单栏的过渡态手机375 × 667纵向堆叠罐区可读、植物可点自检清单罐子是否变形、植物是否溢出、侧栏是否遮挡罐体、文字是否仍可读。4.3 CSS 注释与截图在每个关键布局块上方用注释说明为什么选 Flexbox/Grid、为什么这样分栏为每个测试组合保留截图至少 2 个浏览器 × 3 种屏幕尺寸作为跨浏览器与响应式证据。4.4 README.md 文档作业要求 README 覆盖四点这也是评分维度文档化的直接依据布局选择与理由为什么选 Flexbox 或 Grid结合你的设计目标重构中遇到的挑战如 holder 高度计算、罐子部件定位基准迁移、gap兼容性等浏览器兼容性说明各浏览器实测结果与已知差异运行说明如何打开页面直接双击index.html即可本仓库方案不依赖构建工具与网络资源即可运行仅需现代浏览器。5. 可交付成果清单对照作业核对最终交付物更新后的 HTML 文件语义化结构header/main/section/footer保留全部alt文本支撑所选布局模型重构后的 CSS 文件采用 Flexbox 或 CSS Grid 的现代布局全程相对单位含解释性注释截图集桌面 1920×1080、平板 768×1024、移动 375×667且至少覆盖 2 种浏览器README.md布局选择论证、重构挑战、兼容性说明、运行指引。6. 评估标准理解你将被如何评分作业给出了 5 个维度的评分量表4 分制这也是重构质量的验收清单维度优秀4良好3发展中2起步1布局实现Flexbox/Grid 运用娴熟含高级特性完全响应式实现正确响应式行为良好基础实现存在少量响应式问题布局实现不完整或错误代码质量CSS 整洁、组织良好注释有意义命名一致组织良好含部分注释组织尚可注释极少组织混乱难以理解跨浏览器兼容所有要求的浏览器上表现完全一致附截图兼容性良好细微差异已记录存在不影响功能的兼容性问题重大兼容问题或未做测试响应式设计出色的移动优先方案断点流畅响应式良好断点合理基础响应式特性部分布局问题响应式受限或损坏文档化README 全面详尽含深入说明与洞察文档良好覆盖全部要点基础文档解释较少文档不完整或缺失7. 加分挑战从合格到出彩完成基础重构后作业提供了四条进阶路径均可在本仓库源码基础上继续演化混合布局在页面不同区域分别使用 Flexbox和Grid例如Grid 管整体分栏 Flexbox 管侧栏内植物列表体验两种模型的协作动画集成为.plant添加transition或参考第 2 课 README 中植物轻微摇摆的keyframes挑战让动画与新布局协同注意与拖拽脚本的style.left/top更新不冲突暗色模式用 CSS 自定义属性--jar-bg、--text-color等封装主题变量通过切换类名或media (prefers-color-scheme: dark)实现主题切换容器查询Container Queries以罐区容器为查询单位做组件级响应式container摆脱只能依赖视口宽度的限制。8. 核心收获与原理小结布局方法的取舍一维排列用 Flexbox二维平面用 Grid且要能用一句话讲清为什么绝对定位的适用范围收窄页面级排布交给 Flex/Grid绝对/相对定位留给组件内部罐子部件、拖拽植物这类真正需要精确堆叠的场景相对单位 断点 真响应式%/fr/rem/vh组合与媒体查询配合才能做到优雅适配不同屏幕重构不是重写视觉以完成效果图为基准校验一致性重构成功的标准是看起来一样、结构更健康与后续课程的衔接第 3 课将为植物接入拖拽交互脚本实现见 solution/script.js本次重构保留的plant-holder相对定位上下文正是拖拽能够继续工作的前提。将本次重构与第 2 课 README中学习的层叠、继承、选择器与定位知识串联起来你就完成了从理解 CSS 语法到有意识地设计 CSS 架构的关键一跃——这既是本作业的评分重点也是现代前端工程化的起点。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/10 18:22:11 · 阅读 1.2k Terrarium 项目 CSS 重构实战：以 Flexbox 或 CSS Grid 取代绝对定位（Web-Dev-For-Beginners）
Terrarium 项目 CSS 重构实战以 Flexbox 或 CSS Grid 取代绝对定位Web-Dev-For-Beginners【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本指南对应 Web-Dev-For-Beginners 教程第三部分 Terrarium 项目第 2 课《Introduction to CSS》的课后作业CSS Refactoring Assignment核心任务是将当前基于position: absolute的 Terrarium 布局重构为Flexbox或CSS Grid现代布局体系在保持视觉一致性的前提下获得更易维护、真正响应式的设计。读完本文你将掌握一套可复用的分析现状 → 选择布局模型 → 重构 HTML/CSS → 跨浏览器与响应式测试 → 撰写重构文档的完整实战流程并理解为什么这类迁移能显著提升 CSS 的可维护性。1. 任务背景为什么要重构绝对定位本课作业的起点是你在第 1 课中基于 HTML 结构、并在第 2 课中用 CSS 完成视觉设计的 Terrarium。当前仓库中的完整解决方案样式展示了绝对定位时代的典型写法左右两个植物容器通过position: absolute被钉在视口两侧植物则依靠相对定位容器 绝对定位图片的组合实现层叠。/* 当前方案绝对定位的关键代码节选自 solution/style.css */ .container { background-color: #eee; width: 15%; top: 0px; position: absolute; /* 从文档流中移除钉在视口边缘 */ height: 100%; padding: 10px; } #left-container { left: 0px; } #right-container { right: 0px; }对应地页面结构中左右两侧各放置了 7 个div.plant-holder每个 holder 内部是一个img.plantdiv idleft-container classcontainer div classplant-holder img classplant altplant idplant1 src./images/plant1.png / /div !-- plant2 ~ plant7 依次类推 -- /div div idright-container classcontainer !-- plant8 ~ plant14 -- /div绝对定位的局限在第 2 课 README中已有铺垫脱离文档流容器不再参与正常排版页面其余内容无法感知它们的存在后续添加页头、页脚或导航时极易互相重叠高度依赖视口top: 0、left: 0、right: 0、height: 100%都是相对视口计算的一旦屏幕尺寸或页面结构变化就需要手工调整违反 DRY 原则课程 README 甚至专门用#left-container与#right-container的重叠代码演示了 DRY 违规并示范了用共享类.container 差异化 ID来消除重复——这正是重构思维的一次预演。作业的目标就是用 Flexbox 或 CSS Grid 这类文档流友好的现代布局模型替代这套钉钉子式的定位方案。⚠️一个重要的边界仓库中第 3 课拖拽脚本通过terrariumElement.offsetTop/offsetLeft与style.top/style.left移动植物图片这意味着植物图片本身的绝对定位属于拖拽交互的一部分不应被这次重构移除。本次重构针对的是页面级布局——即左右容器与中央玻璃罐的整体排布方式而不是单株植物在 holder 内部的精确定位机制。2. Phase 1分析与规划2.1 盘点当前使用绝对定位的元素打开你自己的 Terrarium 项目逐一标记以下元素可对照仓库解决方案样式核对元素/选择器当前定位方式职责重构后的角色.container左右容器position: absolutetop: 0左右各left:0/right:0承载植物的两侧栏Flex/Grid 的两个列或行.plant-holderposition: relativeheight: 13%为内部植物建立定位上下文保留继续作为拖拽定位上下文.plantposition: absolutez-index: 2单株植物图片的层叠与缩放保留拖拽依赖见上文边界说明.jar-top/.jar-walls/.jar-bottom/.dirt/.jar-glossy-*position: absolute 百分比尺寸用纯 CSS 拼装玻璃罐收敛到中央罐区容器内部分析的重点是区分布局级绝对定位左右容器钉在视口两侧与组件内定位植物在 holder 内、玻璃罐部件在罐区内的堆叠。前者是本作业的迁移对象。2.2 选择布局方法Flexbox 还是 CSS Grid作业要求二选一对同一组元素不要混用决策依据可以从三个维度展开内容维度一侧是一维的左右两个栏 居中的罐Flexbox 的flex-direction与justify-content就能优雅解决Grid 则适合二维结构例如你需要同时控制行与列、让罐区跨行跨列。对齐需求Flexbox 擅长把一组东西排成一行/一列并控制间距如space-between均匀分布两侧栏Grid 的grid-template-columns: 1fr 3fr 1fr则能用轨道尺寸直接表达两侧等宽、中间占主体的意图。未来演进如果之后要为 Terrarium 增加工具栏、状态栏等多行结构Grid 的grid-template-areas命名区域会让结构一目了然如果只是左栏 主体 右栏的简单分栏Flexbox 更轻量。 经验法则作业核心思想内容是一维排列优先 Flexbox布局是二维平面优先 Grid两者都能实现时选你更熟悉、注释能讲清为什么的那一个——作业评分表里文档化本身就是独立维度。2.3 草拟新布局结构在动笔前先在纸上或注释里画出目标结构。例如Flexbox 方案body/#page作为纵向 flex 容器flex-direction: column主体区再用一个横向 flex 容器承载左栏 / 罐区 / 右栏Grid 方案main直接声明三列1fr 3fr 1fr左栏、罐区、右栏按顺序放入对应的三个轨道并用min-height: 100vh撑满视口。3. Phase 2实现重构3.1 在新目录创建独立版本作业要求把重构后的版本放在独立文件夹中例如terrarium-refactor/这样既能随时对照原版也便于分别截图、分别交付。目录内至少包含terrarium-refactor/ ├── index.html ├── style.css ├── images/ # 沿用原项目植物与资源 └── README.md # 重构说明文档交付物之一3.2 更新 HTML语义化 支撑所选布局重构 HTML 的要点是容器职责清晰 语义正确用header、main、section、footer划分页面大区对照仓库解决方案 index.html中的nav/header/main/footer结构左右栏保留classcontainer但删掉依赖绝对定位的id位置属性位置改由布局模型控制玻璃罐的五个部件jar-top、jar-walls、jar-glossy-long、jar-glossy-short、dirt、jar-bottom统一放入一个罐区容器如div idterrarium方便作为 Grid/Flex 的一个单元整体定位保留全部alt文本作业明确把可访问性列入技术要求img.plant的描述性 alt如 Decorative plant for terrarium是必须继承的。示例Grid 方案下的语义化骨架main idterrarium-layout section idleft-container classcontainer aria-label左侧植物选择区 !-- plant-holder / plant 结构保持不变 -- /section section idterrarium-section aria-label玻璃罐展示区 div idterrarium div classjar-top/div div classjar-walls div classjar-glossy-long/div div classjar-glossy-short/div /div div classdirt/div div classjar-bottom/div /div /section section idright-container classcontainer aria-label右侧植物选择区 !-- plant8 ~ plant14 -- /section /main3.3 重构 CSS两套候选实现作业提供了两套可直接落地的参考代码完整继承如下。Flexbox 方案整体纵向排列 主体横向分布/* Example Flexbox approach */ .terrarium-container { display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; } .plant-containers { display: flex; justify-content: space-between; width: 100%; max-width: 1200px; }在此基础上可以进一步细化.terrarium-container中的flex-direction: column让页头 → 主体 → 页脚自然纵向流动min-height: 100vh保证矮内容页面也能撑满视口.plant-containers用justify-content: space-between把左栏与右栏推向两端、罐区居中——这正是替代left: 0/right: 0的 Flexbox 等价物左右栏内部可以让.plant-holder列表自身变成一列 flexdisplay: flex; flex-direction: column用gap替代原来依赖height: 13%的粗略间距计算间距管理更精确。Grid 方案三列两行轨道 间隙控制/* Example Grid approach */ .terrarium-layout { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto 1fr; min-height: 100vh; gap: 1rem; }要点解析grid-template-columns: 1fr 3fr 1fr左栏、罐区、右栏按 1:3:1 分配宽度罐区永远占据主体两侧栏等宽——百分比的语义更直观grid-template-rows: auto 1fr第一行放页头按内容自适应第二行主体占满剩余高度gap: 1rem统一管理轨道间距替代原来散落各处的 margin 微调若追求更强的可读性可用grid-template-areas命名区域.terrarium-layout { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: header header header left jar right; min-height: 100vh; gap: 1rem; }3.4 保持视觉一致性玻璃罐部件收敛作业特别强调植物与玻璃罐必须出现在与原来相同的位置。对照解决方案样式玻璃罐原本依赖一组绝对定位的百分比部件.jar-walls { height: 80%; width: 60%; background: #d1e1df; border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; opacity: 0.5; z-index: 1; }重构时的处理策略把罐区容器如#terrarium设为position: relative且占据 Grid/Flex 的中央轨道让这些百分比部件从相对视口定位变为相对罐区容器定位。由于相对父容器定位与绝对定位的计算基准一致罐子的形状、比例与透明度效果可以原样保留但整体位置由布局模型决定——这就是用现代布局管排布、用相对定位管内部堆叠的分工。校验一致性的快捷方法在两种方案下分别截图并逐像素对比罐子轮廓与植物分布只要左右栏的宽度比原方案15% 15%对应 Grid 的1fr : 3fr : 1fr与罐区尺寸原方案width: 60%保持等价视觉即可基本对齐。3.5 响应式用相对单位替代固定像素作业的技术要求是使用rem、em、%、vw、vh等相对单位而不是固定像素。这一点仓库源码本身就是范本——解决方案样式中的罐子部件全部使用百分比尺寸与rem圆角。重构时继续贯彻字体与圆角用rem跟随根字号尊重用户字体设置栏宽、罐宽用%或fr全屏容器用vh/vw或min-height: 100vh间距优先gap/rem避免px写死。真正的响应式还需要在断点处调整轨道结构。例如 Grid 方案在小屏下从三列退化为单列纵向堆叠media (max-width: 768px) { .terrarium-layout { grid-template-columns: 1fr; grid-template-areas: header jar left right; } }4. Phase 3测试与文档4.1 跨浏览器测试作业要求的设计在以下浏览器环境中验证并保留截图证据浏览器版本要求Chrome / Edge最新 2 个主版本Firefox最新 2 个主版本Safari最新 2 个主版本移动端浏览器iOS Safari、Chrome Mobile验证手段包括浏览器 DevTools 的设备模拟模式以及真实设备/云真机进行复核用 Can I Use 类工具确认所用特性的支持矩阵本作业用到的flex、grid、gap、media均为现代浏览器广泛支持的稳定特性重点核对的是老旧 Safari 下gap在 Flex 中的表现差异。若发现细微差异如 Safari 对gap的兼容问题记录并写入 README——作业评分明确认可文档化的小差异。4.2 响应式测试在以下三个断点规格上逐一检查布局桌面1920 × 1080三栏完整呈现平板768 × 1024三栏压缩或降为两栏/单栏的过渡态手机375 × 667纵向堆叠罐区可读、植物可点自检清单罐子是否变形、植物是否溢出、侧栏是否遮挡罐体、文字是否仍可读。4.3 CSS 注释与截图在每个关键布局块上方用注释说明为什么选 Flexbox/Grid、为什么这样分栏为每个测试组合保留截图至少 2 个浏览器 × 3 种屏幕尺寸作为跨浏览器与响应式证据。4.4 README.md 文档作业要求 README 覆盖四点这也是评分维度文档化的直接依据布局选择与理由为什么选 Flexbox 或 Grid结合你的设计目标重构中遇到的挑战如 holder 高度计算、罐子部件定位基准迁移、gap兼容性等浏览器兼容性说明各浏览器实测结果与已知差异运行说明如何打开页面直接双击index.html即可本仓库方案不依赖构建工具与网络资源即可运行仅需现代浏览器。5. 可交付成果清单对照作业核对最终交付物更新后的 HTML 文件语义化结构header/main/section/footer保留全部alt文本支撑所选布局模型重构后的 CSS 文件采用 Flexbox 或 CSS Grid 的现代布局全程相对单位含解释性注释截图集桌面 1920×1080、平板 768×1024、移动 375×667且至少覆盖 2 种浏览器README.md布局选择论证、重构挑战、兼容性说明、运行指引。6. 评估标准理解你将被如何评分作业给出了 5 个维度的评分量表4 分制这也是重构质量的验收清单维度优秀4良好3发展中2起步1布局实现Flexbox/Grid 运用娴熟含高级特性完全响应式实现正确响应式行为良好基础实现存在少量响应式问题布局实现不完整或错误代码质量CSS 整洁、组织良好注释有意义命名一致组织良好含部分注释组织尚可注释极少组织混乱难以理解跨浏览器兼容所有要求的浏览器上表现完全一致附截图兼容性良好细微差异已记录存在不影响功能的兼容性问题重大兼容问题或未做测试响应式设计出色的移动优先方案断点流畅响应式良好断点合理基础响应式特性部分布局问题响应式受限或损坏文档化README 全面详尽含深入说明与洞察文档良好覆盖全部要点基础文档解释较少文档不完整或缺失7. 加分挑战从合格到出彩完成基础重构后作业提供了四条进阶路径均可在本仓库源码基础上继续演化混合布局在页面不同区域分别使用 Flexbox和Grid例如Grid 管整体分栏 Flexbox 管侧栏内植物列表体验两种模型的协作动画集成为.plant添加transition或参考第 2 课 README 中植物轻微摇摆的keyframes挑战让动画与新布局协同注意与拖拽脚本的style.left/top更新不冲突暗色模式用 CSS 自定义属性--jar-bg、--text-color等封装主题变量通过切换类名或media (prefers-color-scheme: dark)实现主题切换容器查询Container Queries以罐区容器为查询单位做组件级响应式container摆脱只能依赖视口宽度的限制。8. 核心收获与原理小结布局方法的取舍一维排列用 Flexbox二维平面用 Grid且要能用一句话讲清为什么绝对定位的适用范围收窄页面级排布交给 Flex/Grid绝对/相对定位留给组件内部罐子部件、拖拽植物这类真正需要精确堆叠的场景相对单位 断点 真响应式%/fr/rem/vh组合与媒体查询配合才能做到优雅适配不同屏幕重构不是重写视觉以完成效果图为基准校验一致性重构成功的标准是看起来一样、结构更健康与后续课程的衔接第 3 课将为植物接入拖拽交互脚本实现见 solution/script.js本次重构保留的plant-holder相对定位上下文正是拖拽能够继续工作的前提。将本次重构与第 2 课 README中学习的层叠、继承、选择器与定位知识串联起来你就完成了从理解 CSS 语法到有意识地设计 CSS 架构的关键一跃——这既是本作业的评分重点也是现代前端工程化的起点。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考