应按使用场景而非设备型号设断点：575px以下为窄屏手机，576–767px为大屏手机/小折叠屏横屏，768–991px为平板/中等桌面，992px以上为常规桌面；边界值须对齐（如max-width: 767px后接min-width: 768px），避免留白。
怎么用@media写断点，才不会漏掉常见设备
直接按像素写断点容易出问题，比如max-width: 768px看似覆盖了平板，但很多安卓平板实际渲染宽度是800px或812px，而iPhone SE（第三代）逻辑像素是375px，但DPR=2，物理像素是750px——这些细节不处理，样式就会在真机上错位。
更稳妥的做法是参考主流框架的断点策略，优先按使用场景分，而不是死磕设备型号：
-
@media (max-width: 575px)：窄屏手机（小屏竖屏为主） -
@media (min-width: 576px) and (max-width: 767px)：大屏手机 / 小折叠屏横屏 -
@media (min-width: 768px) and (max-width: 991px)：平板、中等尺寸桌面缩放 -
@media (min-width: 992px)：常规桌面，不设上限（避免未来大屏失效）
注意：min-width和max-width混用时，边界值必须对齐，否则中间会留白。例如max-width: 767px之后必须接min-width: 768px，不能跳到769px。
为什么写了@media，样式还是没生效
最常见的原因是CSS优先级被覆盖，或者媒体查询本身没被触发。先确认两件事：
立即学习“前端免费学习笔记（深入）”；
- 浏览器地址栏是否显示
localhost或file://？Safari在file://协议下会禁用部分媒体查询，必须走http://或https://服务 - 检查开发者工具的“响应式模式”是否启用了“device pixel ratio”模拟，有些样式依赖
resolution或hover特性，未开启对应模拟就不会命中 - 如果样式写在
<style></style>标签里但用了scoped（如Vue单文件组件），@media内部选择器必须能匹配到作用域内的元素，否则规则被自动忽略
快速验证方法：在@media块里加一条body { background: red !important; }，看是否变红。不变红说明媒体查询根本没运行；变红但其他样式无效，就是选择器权重或作用域问题。
如何让字体大小随屏幕线性缩放
单纯用rem或固定px做不到真正的流体缩放，需要用clamp()配合viewport单位：
h1 {
font-size: clamp(1.25rem, 4vw, 2.5rem);
}这行的意思是：最小1.25rem（约20px），最大2.5rem（约40px），中间按视口宽度的4%线性变化。比纯vw更安全，避免小屏字太小、大屏字太大。
要注意两点：
-
clamp()在IE中完全不支持，如需兼容IE，得回退到@media多断点写法 -
vw基于整个视口宽度，如果页面有垂直滚动条，某些浏览器会把滚动条宽度算进100vw，导致布局微偏，可加html { overflow-y: scroll; }提前预留空间
打印样式也要响应式？
很多人忘了@media print也是@media的一种，而且它和屏幕查询互不影响。如果你的页面要支持打印（比如报表、简历），得单独处理：
- 隐藏非内容元素：
@media print { .navbar, .ads { display: none; } } - 强制颜色输出（避免浏览器默认禁用背景色）：
@media print { * { -webkit-print-color-adjust: exact; color-adjust: exact; } } - 避免分页截断标题：
@media print { h2 { break-after: avoid; } }
关键点在于：打印媒体查询不会继承屏幕查询里的min-width等条件，它是独立分支。别指望@media screen and (min-width: 768px) { ... }里的规则会自动用于打印——除非你显式再写一遍@media print。
真正难的是测试：Chrome的打印预览里，“更多设置”里的“背景图形”开关默认关着，不打开就看不到background-color和background-image，这个细节几乎没人记得调。
