核心是移动优先+min-width断点配合viewport标签和相对单位实现响应式。需先加，再按内容需求分层增强，结合rem、clamp()及flexbox/grid提升弹性。
核心在于用 @media 规则配合视口控制和相对单位，让样式随屏幕变化自动切换。关键不是堆砌断点，而是按内容需要分层增强。
必须先加 viewport 元标签
没有它，移动端浏览器会以约 980px 的虚拟宽度渲染，所有 max-width 查询都失效。在 HTML 的 中写：
<meta name="viewport" content="width=device-width, initial-scale=1">
其中 width=device-width 把视口宽度映射到设备真实 CSS 像素，initial-scale=1 防止缩放错乱。
推荐移动优先 + min-width 断点
先写小屏基础样式（比如单列、字号适中、间距宽松），再用 min-width 向上增强。这样代码更轻量，逻辑也更清晰。
- 基础样式不加媒体查询，直接写在最外层
- 平板起始：用
@media (min-width: 768px) - 桌面常用：用
@media (min-width: 1024px)或1200px - 避免混用
max-width和min-width同一数值，否则 768px 这个临界点可能行为不可控
断点别照搬设备尺寸，看内容表现
断点不是为 iPhone 或 iPad 设的，而是为内容服务的。当出现以下情况时，就是该加断点的信号：
- 文字行宽过长（超过 80 字符），阅读吃力 → 加大字号或限制容器宽度
- 导航栏开始换行或图标重叠 → 切换为水平布局或折叠菜单
- 卡片并排后留白过多或挤压变形 → 改用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 按钮太小难点击 → 增加 padding 和最小高度
搭配相对单位和现代函数更平滑
光靠媒体查询切换整块样式略显生硬。建议结合：
- 用
rem控制字号和间距，便于整体缩放 - 用
clamp(16px, 4vw, 24px)实现字号的连续响应，比纯 media query 更细腻 - Flexbox 和 Grid 布局本身具备弹性，媒体查询只需调整方向、换行或列数，不用重写结构
- 慎用
orientation: landscape，iOS Safari 和部分安卓 WebView 行为不稳定，优先用宽度判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
