CSS 响应式设计
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
在这个练习中，你将学习如何创建响应式网页布局。
什么是响应式设计？
- 适应性：布局能够适应不同屏幕尺寸
- 媒体查询：使用 @media 规则定义断点
- 移动优先：从小屏幕开始设计，逐步增强
Intermediate⏱ 25-30 min
Learning Objectives
- 理解响应式设计的核心概念
- 掌握媒体查询 @media 的语法
- 学会设置常用断点 (breakpoints)
- 实现移动端和桌面端的不同布局
Scenario
你正在为一个产品展示页面创建响应式布局。
这个页面需要：
- 在手机上显示单列布局
- 在平板上显示两列布局
- 在桌面上显示三列布局
同时，导航栏在小屏幕上需要变成汉堡菜单样式。
Why Do This
- CSS is fundamentally about constraining layout and visual hierarchy, not memorizing properties.
- Clarify the box model and layout rules first, then add visual polish — less rework that way.
- Writing styles as reusable patterns is more valuable than tweaking a single page.
Hands-on Practice
- Write the layout skeleton first (display/gap/align), then add colors and shadows.
- Extract repeated styles into reusable classes.
- Use validation rules to reverse-engineer the design intent of your current styles.
Common Mistakes
- Adding margin after margin to fix positioning while ignoring layout containers.
- Selectors nested too deep, causing style coupling.
- Only caring about how it looks without considering maintainability.
Deliverable
A reusable component style template (layout rules + visual rules + naming conventions).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was your main layout decision? Why did you choose it?
What change did you make specifically for maintainability?
What would you prioritize improving next time?
Tags
CSS响应式媒体查询移动优先