真正适配小屏需结合viewport控制+min-width断点+弹性单位，而非单用max-width:320px；必须设width=device-width的viewport，用min-width与max-width组合断点精准覆盖真实视口区间，并以rem/vw控制字体与间距。
直接用 @media screen and (max-width: 320px) 并不可靠——它容易误判，也忽略视口缩放、DPR 和用户字体设置。真正适配 iPhone SE（320×568）、iPhone 5/5s（320×568）这类小屏的关键，是结合 viewport 控制 + 移动优先的 min-width 断点 + 弹性单位，而不是单独“盯住某个设备”。
必须先设对 viewport
没有正确的 viewport，媒体查询基本失效：
特别注意：不能写成 width=320。虽然有些老方案这么做，但会导致在 iPhone SE 上强制拉伸，在 iOS Safari 中反而触发横向滚动条或文字错位。用 width=device-width 才能让 CSS 媒体查询基于真实的视口宽度（即 320px）计算。
用 min-width 组合断点，避免样式污染
针对小屏紧凑布局，推荐这样组织断点（按实际视口宽度，非 device-width）：
-
@media screen and (min-width: 321px) and (max-width: 375px)→ 覆盖 iPhone SE / 8 / Xr 等主流小屏 -
@media screen and (max-width: 320px)→ 仅留给极少数老旧机型（如 iPhone 4s），可只调 font-size、padding 等微调项
不建议单用 max-width: 320px 覆盖全部小屏，因为很多安卓小屏（如 360×640）视口宽度其实是 360px，会被漏掉；而用 min-width + max-width 组合，能精准圈出真实小屏区间，防止大屏样式意外渗入。
紧凑布局的核心是“收缩+留白控制”
小屏不是简单缩小字号，而是重构信息密度。关键操作包括：
- 基础字体用
rem或vw，例如font-size: clamp(14px, 4.2vw, 16px)，确保在 320px 下不小于 14px，又不会在 375px 下撑满行宽 - 外边距和内边距统一用
0.5rem或clamp(8px, 2.5vw, 12px)，避免固定 px 在小屏上挤成一团 - 禁用固定宽容器，改用
max-width: 100%; padding: 0 1rem;，让内容始终贴边呼吸 - 折叠非核心模块：比如把“相关推荐”栏设为
display: none，仅在min-width: 376px后才display: block
别碰 device-width，它不反映真实渲染宽度
像 @media (min-device-width: 320px) 这类写法在现代 H5 中基本失效。原因很实在：iOS Safari 默认视口宽度是 980px，除非你已正确设置了 viewport，否则设备物理宽度根本不会参与 CSS 计算。媒体查询应始终基于 viewport width（即 CSS 像素宽度），而不是 device-width 或分辨率。
