Web设计示例：响应式布局实现 🎨

1. 核心概念

响应式设计是让网页适配不同设备的关键技术，主要通过以下方式实现：

• 媒体查询 (@media)：检测屏幕尺寸并应用不同样式
• Flexbox/grid布局：灵活的布局模型
• 图片自适应：使用 max-width: 100% 保持比例

2. 代码示例

/* 基础样式 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
  }
}

3. 实践建议

• 使用 REM 或 VW 单位替代固定像素值
• 优先设计移动端布局，再适配桌面端
• 测试工具：https://responsivedesigns.com

4. 扩展阅读

想深入学习响应式设计？请访问 /web-design/responsive-design 查看完整指南 📚