响应式设计以“移动优先+断点控制”为核心，需先设视口meta标签，再用min-width媒体查询按768px、1024px、1440px等断点渐进增强，并结合%、rem、flex、grid及max-width:100%等弹性样式实现真正适配。
响应式设计通过媒体查询（@media）实现屏幕适配，核心是“移动优先 + 断点控制”：先写小屏基础样式，再用 @media 在关键宽度处叠加调整规则。
设置视口是前提
没有正确的视口声明，媒体查询无法准确识别设备宽度。必须在 HTML 的 <head> 中加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这告诉浏览器按设备真实宽度渲染，并禁用双击缩放等干扰行为。
用 min-width 定义主流断点
推荐使用 min-width（而非 max-width）做断点，更符合“渐进增强”逻辑，避免样式覆盖混乱。常见断点参考：
-
手机（默认）：不加媒体查询，直接写基础样式（如
font-size: 14px、单列布局） -
平板起始（≥768px）：
@media (min-width: 768px) { ... }→ 调整导航为横排、增大内边距 -
桌面起始（≥1024px）：
@media (min-width: 1024px) { ... }→ 启用两栏或三栏布局 -
大桌面（≥1440px）：
@media (min-width: 1440px) { ... }→ 居中宽容器（如max-width: 1280px）
结合相对单位与弹性布局
媒体查询只负责“切换”，真正适配靠的是内部样式是否具备伸缩性：
- 宽度用
%、rem、vw替代固定px，例如width: 90%或font-size: 1.1rem - 容器优先用
display: flex或display: grid，配合flex-wrap: wrap或grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 图片加
max-width: 100%; height: auto，防止溢出容器
注意方向与高分辨率场景
除宽度外，还可补充其他条件提升体验：
-
横竖屏判断：
@media (orientation: landscape) { .video-player { width: 80vw; } } -
Retina 屏适配：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { img.logo { background-image: url(logo@2x.png); } } -
打印样式：
@media print { .no-print { display: none; } }隐藏非必要元素
