真正可靠的响应式断点应分小屏（max-width: 480px）和大屏手机/小平板（481px–767px），并强制配合 viewport meta 标签；折叠屏需用 @supports 检测双视口并结合 js 防抖监听，css 无法可靠捕获展开中间态。
直接用 max-width 断点就能覆盖绝大多数手机屏幕，但别只盯着像素值——关键得理解 viewport 实际宽度、设备像素比和折叠态干扰这三层真实限制。
为什么 max-width: 767px 不等于“所有手机”
这个断点能捕获 iPhone 14 竖屏（390px）、Pixel 7（412px）等主流机型，但容易漏掉两类情况：
- 安卓中高端机（如 Samsung S24 Ultra）默认缩放后
document.documentElement.clientWidth可能达 480px，但用户实际看到的仍是小屏体验 - 折叠屏处于半开状态时，
visualViewport.width在 500–600px 区间跳变，max-width: 767px会误判为“平板”而启用错误布局 - 部分国产浏览器（如 UC、QQ 浏览器）忽略
viewportmeta 标签，导致媒体查询基于错误视口宽计算
真正可靠的起点是 @media (max-width: 480px)（小屏手机），再叠加 @media (min-width: 481px) and (max-width: 767px)（大屏手机/小平板），避免一刀切。
必须配合 viewport meta 标签，否则 media query 失效
没有这行 HTML，@media 规则基本白写：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
注意三点：
-
width=device-width是核心，它让 CSS 中的1px对应设备独立像素（DIP），不是物理像素 - 去掉
user-scalable=no会破坏可访问性；保留它需同步提供字号调节按钮，否则 WCAG 不合规 - 在 iOS Safari 中，若页面存在横向滚动，
initial-scale=1.0可能被忽略，需额外加overflow-x: hidden到body
折叠屏手机不能依赖 screen-spanning
screen-spanning 媒体特征从未被任何稳定版浏览器实现，Chromium 已标记为废弃，Safari 和 Firefox 完全不识别。你写 @media (screen-spanning: single-fold-vertical)，DevTools 里根本不会亮起匹配状态。
当前唯一可行方案是：
- 用
@supports (horizontal-viewport-segments: 2)检测双视口（Z Fold 展开） - 用
@supports (vertical-viewport-segments: 2)检测上下分割（Mate X3 展开） - 必须搭配 JS 监听：
matchMedia('(horizontal-viewport-segments: 2)')，且加 100ms 防抖——因为系统上报有延迟，半开状态可能触发多次 false positive - CSS 内部不要混用
min-width：例如@media (min-width: 768px) and (horizontal-viewport-segments: 2)是错的，前者算总宽，后者只在单侧渲染时为真
字体和图片适配别只靠 media query
单纯用 @media (max-width: 480px) { font-size: 14px; } 容易在高 DPI 屏上显得过小。更稳妥的做法是：
- 基础字号用
rem，根元素设font-size: clamp(14px, 2.5vw, 16px)，兼顾小屏可读性和大屏不溢出 - 图片用
srcset+sizes，例如：<img src="small.jpg" srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 767px) 50vw, 33vw"> - 图标优先用 inline SVG 或 icon font，避免 raster 图片在 DPR=3 设备上模糊
折叠屏展开瞬间，visualViewport.width 可能先跳到 720px 再回落到 360px（双视口各半），纯 CSS 无法捕捉这种中间态，必须靠 JS + visualViewport API 补充判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
