什么是响应式设计

响应式网页设计（RWD）是一种网页设计方法，使网页能够自适应不同设备的屏幕尺寸和分辨率。

核心技术

• 流式布局：使用百分比和flex/grid布局
• 媒体查询：@media规则针对不同断点
• 弹性图片：max-width:100%防止溢出
• 视口设置：meta viewport标签

常用断点

@media (max-width: 576px) { /* 手机 */ }
@media (max-width: 768px) { /* 平板 */ }
@media (max-width: 992px) { /* 笔记本 */ }
@media (max-width: 1200px) { /* 桌面 */ }