什么是响应式设计？
响应式网页设计（Responsive Web Design，简称 RWD）是一种让网页在不同设备（如手机、平板、桌面电脑）上都能良好显示的设计方法。它通过灵活的网格布局、弹性图片和 CSS 媒体查询实现内容自适应。
核心三大技术
- 流式布局（Fluid Grids）：使用百分比而非固定像素定义宽度。
- 弹性图片（Flexible Images）：图片最大不超过其容器宽度。
- 媒体查询（Media Queries）：根据设备特性应用不同样式规则。
响应式断点示例
常见断点设置（单位：px）：
- 手机：
max-width: 480px - 小屏平板：
max-width: 768px - 大屏平板/小桌面：
max-width: 1024px - 桌面端：
min-width: 1025px
以下为模拟设备视图（仅示意）：
📱 手机
📱 平板
💻 桌面
为什么选择响应式？
✅ 提升用户体验
✅ 降低维护成本（一套代码多端运行）
✅ 有利于 SEO（Google 推荐移动友好设计）
✅ 适应未来新设备