必须用 min-width 而非 max-width 做主干断点，因移动端优先需基础样式直写、大屏增强叠加；width 须区分 device-width，仅 width 随视口实时变化；断点须整数 px、升序无间隙；link 的 media 属性须完整写为 screen and (min-width: npx)。
用 @media (min-width: Npx) 写断点，配合移动优先默认样式，就能可靠适配不同屏幕——不是“写了就生效”，而是断点位置、单位选择、width 与 device-width 的区分，直接决定样式是否在横竖屏切换、缩放、不同设备上真正响应。
为什么必须用 min-width 而不是 max-width 做主干断点
移动端优先开发时，基础样式（如单列、小字体、无浮动）直接写在普通 CSS 规则里，不包在任何 @media 中；大屏增强规则只用 @media (min-width: 768px) 这类向上叠加的写法。这样避免了覆盖混乱和漏兜底。
-
max-width容易导致边界遗漏：比如写了@media (max-width: 768px)和@media (max-width: 1024px)，但 769–1023px 区间没定义，浏览器会沿用上一条规则，结果平板横屏样式错乱 -
min-width天然层叠：小屏是底色，大屏只是追加或微调，逻辑清晰，维护成本低 - 主流框架（Bootstrap 5+、Tailwind）全部采用
min-width断点体系，混用会破坏一致性
width 和 device-width 必须分清，否则横屏/缩放就失效
日常响应式布局几乎只该用 width（即视口宽度），它随浏览器窗口缩放、设备横竖屏实时变化；而 device-width 是设备物理像素宽度经 DPR 缩放后的固定值，不会响应用户操作。
- 写
@media (min-device-width: 768px)在 iPad 竖屏时可能不触发——因为它的device-width是 1024px，但竖屏视口width只有 768px - 用户旋转手机后样式不更新？八成是误用了
device-width - 仅在打印样式、特定硬件识别等极少数场景才考虑
device-width
断点数值、单位和顺序不能随便写
断点不是拍脑袋定的，整数 px 单位 + 升序排列 + 非重叠区间，是保证解析可预测的前提。
- 必须用整数
px：写768.5px或em会导致某些浏览器解析异常或媒体查询失效 - 断点要升序且无间隙：比如
480px→768px→1024px，中间不能跳过 481–767px 这个区间 - 只写变更属性：断点内不要重复定义未变的样式，比如
.container在小屏已设padding: 10px，大屏只需覆盖padding: 20px，别再写一遍width或margin
用 <link> 加载条件 CSS 文件时，media 属性要精准
通过 HTML 的 <link rel="stylesheet"> 按需加载外部样式表，能减少初始 CSS 体积，但 media 属性写错等于白搭。
- 语法必须是
media="screen and (min-width: 768px)"，不能漏掉screen或括号，也不能写成media="(min-width: 768px)"（部分旧浏览器不识别） - 多个条件用
and连接：media="screen and (min-width: 481px) and (max-width: 768px)"表示仅在平板横屏生效 - 浏览器会预加载所有带
<link>的 CSS，但只对匹配media的文件应用样式；不匹配的仍会下载（只是不渲染），所以别滥用
最常被忽略的是：媒体查询本身不解决布局僵硬问题。如果容器用了 width: 1200px 这种绝对宽度，再密的断点也救不回横向滚动条——适配的前提，是整个结构从一开始就没锁死尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
