怎样在CSS中结合Grid和媒体查询适配折叠屏手机展开态-css教程-PHP中文网

折叠屏展开态断点应设为@media (min-width: 720px) and (min-aspect-ratio: 18/10)，兼顾物理宽度、宽高比并排除平板误判；grid双栏布局需默认单列，展开态用280px minmax(0,1fr)实现自适应；左右栏高度对齐优先用grid-auto-rows和grid-row:1/-1，禁用align-items:stretch及height:100%；字体保持16px根字号，仅微调行高与内边距，避免vw或rem动态缩放引发跳变。

怎样在css中结合grid和媒体查询适配折叠屏手机展开态

折叠屏展开态的断点怎么设才靠谱

折叠屏设备（如三星 Galaxy Z Fold 系列、华为 Mate X 系列）在展开时屏幕宽高比和分辨率变化大，但厂商不统一提供 CSS 媒体查询特征。不能依赖 screen-spanning（已废弃）或 display-mode: standalone 这类伪断点。实际有效的方式是结合物理宽度 + 比例 + 用户代理线索：

展开态常见宽度 ≥ 720px（Z Fold4 展开为 1896×2152，等效 CSS px 约 744px）
宽高比通常 > 1.8（折叠态一般 ≤ 1.3）
需排除平板（比如 iPad 宽度也超 720px，但比例接近 1.4）

推荐用这个组合断点：

@media (min-width: 720px) and (min-aspect-ratio: 18/10) {
  /* 展开态 Grid 布局入口 */
}

注意：不要只用 min-width，否则 iPad 会误命中；也不要依赖 hover: hover，Z Fold 展开后仍可能无 hover 能力。

Grid 布局如何响应式切分左右区域

展开态典型需求是“左导航 + 右内容”双栏，但必须保证：

折叠态退化为单列流式布局（避免横向滚动）
左栏固定宽度（如 280px），右栏自适应，且右栏最小宽度要防挤压
不用 grid-template-columns: 280px 1fr 硬写，它在小屏下不会自动回退

正确做法是用 grid-template-columns 配合 minmax() 和 auto-fit：

@media (min-width: 720px) and (min-aspect-ratio: 18/10) {
  .layout {
    grid-template-columns: 280px minmax(0, 1fr));
  }
}
.layout {
  display: grid;
  grid-template-columns: 1fr;
}

关键点： - 默认单列（1fr），展开态才覆盖为双列 - minmax(0, 1fr) 比纯 1fr 更安全，防止内容撑爆容器 - 不要用 fit-content()，它在部分 Android WebView 中不兼容