总体最佳实践
- 使用
@container查询可创建组件驱动的自适应布局，这些布局会根据其父级容器的大小（而非视口）进行调整。如需了解详情，请参阅尺寸感知样式设置。 - 使用动态视口单位（
dvh、dvw）而非vh/vw，以防止在移动浏览器界面元素（如地址栏）出现或消失时布局遭到破坏。 - 对媒体元素（例如
<img>和<video>）使用aspect-ratio，以便在加载期间预留空间并防止累积布局偏移 (CLS)。
如需了解自适应界面背后的布局机制（Flexbox、网格、容器查询单位、视口单位），请参阅 CSS 布局和自适应设计。
自适应排版
- 务必在
clamp()中结合使用视口相对单位和字体相对单位，以便字体大小随视口大小缩放，同时确保其保持在所需范围内。例如clamp(2rem, 1rem + 5vw, 4rem)。调整视口相对单位和字体相对单位的比例，以控制字体大小的变化速度。 - 请勿单独使用
vw来设置字体大小而不使用clamp()，因为这可能会导致文本在极端屏幕上缩放得过小或过大。
如需根据容器（而非视口）缩放字体和间距，请参阅平滑缩放。