折叠屏平板断点应以内容自然折行为锚点而非固定值，推荐用min-width递进式媒体查询（如960px、1440px），并配合matchMedia监听viewport变化，避免嵌套查询与max-width混用。
折叠屏平板的断点不能照搬传统 768px 或 1024px
折叠屏平板（比如华为 Mate X 系列、三星 Galaxy Z Fold）在展开和折叠状态下，视口宽度可能分别达到 1800px+ 和 800px 左右，但系统上报的 window.innerWidth 并不总等于物理屏幕宽度——它取决于当前应用是否全屏、是否分屏、是否启用多窗口模式。直接用固定值如 @media (min-width: 1024px) 判定“平板”会漏掉大量真实场景。
更可靠的做法是：以内容自然折行为锚点，而非设备型号。例如，一个四列网格在 923px 开始换行，那 @media (min-width: 960px) 就比硬套 1024px 更贴切。
- 打开 Chrome DevTools → 切换到「Responsive」模式 → 勾选「Device Frame」→ 拖动宽度滑块，重点观察折叠态（约 720–840px）和展开态（约 1400–1800px）交界处的内容断裂点
- 记下几个关键像素值：比如导航栏文字开始换行的宽度、卡片从 4 列变 3 列的临界点、图片开始被裁切的位置
- 向上取整为易维护值：923px → 960px，1437px → 1440px，避免用小数或奇数
@media 中优先用 min-width 而非 max-width
混合使用 @media (max-width: 959px) 和 @media (min-width: 960px) 在折叠屏缩放 110% 或 DPI 变化时，极易出现 959.5px 这类中间值，导致两者都不匹配，布局留白或错位。
推荐统一采用移动优先 + min-width 递进写法：
立即学习“前端免费学习笔记（深入）”；
/* 基础样式：默认适配小屏 */
.container { grid-template-columns: 1fr; }
<p>/<em> 折叠态宽屏（约 800px+） </em>/
@media (min-width: 960px) {
.container { grid-template-columns: repeat(2, 1fr); }
}</p><p>/<em> 展开态大屏（约 1440px+） </em>/
@media (min-width: 1440px) {
.container { grid-template-columns: repeat(4, 1fr); }
}- 所有基础样式不包
@media，保证最小屏可用 - 每个断点只定义“从此宽度起新增能力”，逻辑线性、覆盖清晰
- 避免嵌套媒体查询，尤其不要在
@media里再套@media
折叠屏需额外监听 viewport 变化而非仅依赖 CSS 媒体查询
CSS 媒体查询对折叠/展开这类瞬时尺寸变化响应有延迟（尤其在 Android WebView 或 HarmonyOS 的 webview 中），单纯靠 @media 可能导致侧边栏闪现或布局卡在旧状态。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
必须配合 JavaScript 监听：
- 使用
window.matchMedia()主动监听，而不是只靠 CSS - 对折叠屏特别关注
(width >= 960px) and (height >= 1200px)这类组合条件，避免误判横竖屏切换 - 在 HarmonyOS 上优先用
@ohos.mediaquery的matchMediaSync，它对折叠事件响应更快
示例（Web 端）：
const mq = window.matchMedia('(min-width: 960px)');
function handleBreakpoint(e) {
if (e.matches) {
document.body.classList.add('wide-screen');
} else {
document.body.classList.remove('wide-screen');
}
}
mq.addEventListener('change', handleBreakpoint);
handleBreakpoint(mq); // 初始化Flex/Grid 在折叠屏下的常见错位问题
折叠屏展开后，flex-wrap: wrap 或 grid-auto-flow: dense 容易因容器宽高比突变导致子项错位——比如卡片高度不一致时，第二行第一个元素“上浮”到第一行末尾右侧空隙中。
解决思路不是调 align-items，而是控制流式行为本身：
- 给 Grid 容器加
grid-auto-rows: minmax(200px, auto)，避免高度塌陷 - 用
gap替代margin控制间距，它在折叠/展开时更稳定 - 避免在折叠态用
display: flex+flex-direction: column混搭大图，容易触发渲染层溢出 - 对关键区块（如导航栏、主内容区）单独设
min-width，防止被压缩到不可读程度
最常被忽略的是：折叠屏在分屏模式下，vh 单位会按分屏区域计算，不是全屏高度。用 100dvh 替代 100vh 能规避大部分高度错乱。
