响应式网站如何设计？媒体查询断点选择？

1. 响应式设计核心原则

响应式网站（RWD）需适配不同设备屏幕，主要依赖 弹性布局+媒体查询 实现。

关键技术：
- 流式网格布局：使用百分比或 flex/grid 代替固定宽度。
- 弹性图片/视频：设置 max-width: 100% 防止溢出。
- 移动优先（Mobile First）：先设计移动端，再逐步扩展到大屏。

2. 媒体查询（Media Query）断点选择

断点（Breakpoints）是屏幕尺寸的分界点，常用标准如下：

设备类型	断点范围（px）	典型应用场景
手机（竖屏）	≤576	单列布局，隐藏次要内容
平板/大手机	577~768	调整边距，优化导航栏
小型桌面	769~992	双栏布局，显示侧边栏
大型桌面	≥993	多栏布局，完整功能展示

示例代码：

css

/* 移动优先（默认样式为手机端） */ .container { padding: 10px; } /* 平板适配 */ @media (min-width: 577px) { .container { padding: 20px; } } /* 桌面适配 */ @media (min-width: 993px) { .container { max-width: 1200px; margin: 0 auto; } }