应新增自定义断点并结合媒体查询、尺寸区间锁定、双屏状态控制及动态字体缩放：在tailwind.config.js中添加folded/unfolded断点，用max-w/min-w替代w-类切换，加overflow-hidden防溢出，用data-fold-state硬控导航显示，字体用clamp()适配DPR变化。
折叠屏设备的断点怎么设
Tailwind 默认断点（sm、md、lg）对折叠屏基本无效——它按固定像素划分，而折叠屏展开后宽度可能达 1400px+，但系统仍报告为「移动端」；合起来又可能是 720px，却被识别成平板。不能只靠 md: 或 xl: 控制布局。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
tailwind.config.js中新增自定义断点，例如：{ 'folded': { 'raw': '(max-width: 768px) and (min-aspect-ratio: 1/1)' }, 'unfolded': { 'raw': '(min-width: 1024px) and (min-aspect-ratio: 2/1)' } } - 用
@layer utilities扩展类名，如folded:flex-col、unfolded:grid-cols-3 - 避免仅依赖屏幕宽度，加一层
screen-orientation检测：合盖时多为 portrait，展开后常为 landscape，可用portrait:/landscape:前缀辅助判断
侧边栏在折叠/展开态下如何平滑过渡
直接切 w-64 → w-16 在折叠屏上极易跳变——因为系统在两种形态间快速切换，浏览器来不及重排，transition-all 会失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃纯
w-类切换，改用max-w-[16rem]+min-w-[4rem]锁定尺寸区间，并显式声明transition-max-width duration-300 ease-in-out - 折叠态必须加
overflow-hidden，否则图标或文字在max-w-0下仍可能外溢（尤其当子元素含whitespace-nowrap） - 用 JS 监听
window.matchMedia的change事件，而非仅响应resize——折叠动作触发的是媒体查询状态变更，不是窗口尺寸连续变化
导航菜单在双屏模式下怎么不重复渲染
部分折叠屏（如 Galaxy Z Fold）在展开时会模拟「双窗口」环境，同一页面可能被同时渲染在左右两个逻辑视口里，导致 nav 组件意外出现两次，或 mobile-menu 在右屏也弹出。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
useMediaQueryHook 封装检测逻辑，优先判断(display-mode: standalone)和(forced-colors: none)等更稳定的上下文信号 - 给导航容器加
data-fold-state="unfolded"属性，CSS 中用[data-fold-state="unfolded"] .mobile-menu { display: none; }硬控 - 避免在
useEffect里只监听window.innerWidth，应结合screen.availWidth与screen.orientation.type做交叉验证
字体和间距在不同折叠态下怎么保持可读性
折叠屏从合盖到展开，DPR 可能从 2x 跳到 3x，物理像素密度突变，但 rem 基于根字号，若未动态调整，小屏下文字会过小，大屏下又过大。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不用固定
font-size: 16px，改用font-size: clamp(0.875rem, 4vw, 1.125rem)，让字体在 320px–1440px 区间内线性缩放 - 间距类慎用
px单位（如p-4），优先选rem或vh/vw，例如py-2→py-[2dvh]（需启用viewport单位支持） - 测试时别只看 Chrome DevTools 的「折叠屏预设」——它不模拟 DPR 切换，真机调试必须用 USB 连接实际设备跑
console.log(window.devicePixelRatio)
