自适应设计

Web 功能： 容器查询（大小） 小型、大型和动态视口单位 aspect-ratio min()、max() 和 clamp() 视口单位

总体最佳实践

  • 使用 @container 查询可创建组件驱动的自适应布局，这些布局会根据其父级容器的大小（而非视口）进行调整。如需了解详情，请参阅尺寸感知样式设置。
  • 使用动态视口单位（dvh、dvw）而非 vh/vw，以防止在移动浏览器界面元素（如地址栏）出现或消失时布局遭到破坏。
  • 对媒体元素（例如 <img> 和 <video>）使用 aspect-ratio，以便在加载期间预留空间并防止累积布局偏移 (CLS)。

如需了解自适应界面背后的布局机制（Flexbox、网格、容器查询单位、视口单位），请参阅 CSS 布局和自适应设计。

自适应排版

  • 务必在 clamp() 中结合使用视口相对单位和字体相对单位，以便字体大小随视口大小缩放，同时确保其保持在所需范围内。例如 clamp(2rem, 1rem + 5vw, 4rem)。调整视口相对单位和字体相对单位的比例，以控制字体大小的变化速度。
  • 请勿单独使用 vw 来设置字体大小而不使用 clamp()，因为这可能会导致文本在极端屏幕上缩放得过小或过大。

如需根据容器（而非视口）缩放字体和间距，请参阅平滑缩放。