H5 CSS 容器查询与组件自适应

摘要：媒体查询通常依据视口尺寸切换布局，而组件在不同容器中的宽度可能截然不同。容器查询让组件根据自身可用空间调整呈现，本文介绍使用边界与回退思路。

一、先定义查询容器

容器查询需要明确哪个祖先容器为组件提供尺寸上下文。为容器声明查询类型后，内部组件可以依据可用宽度切换布局，而不必假设整个页面宽度等于组件宽度。

容器边界应选择稳定且语义清楚的布局层级。随意把每个节点设为容器会让样式关系变复杂，也可能影响尺寸计算。

二、按组件能力切换

卡片在宽容器中可以并排展示图像和说明，在窄容器中则纵向排列。查询阈值应根据内容所需的最小可读空间设置，而不是照搬某类设备的固定宽度。

断点越少通常越容易维护。优先使用自然流式布局和弹性尺寸，只有结构确实需要变化时再切换排列方式。

三、避免尺寸循环

如果容器尺寸受查询结果影响，同时查询结果又根据该尺寸来回变化，布局可能产生不稳定反馈。为查询容器设置清楚的外部约束，让内容样式变化不会反过来改变关键测量关系。

百分比宽度、最小尺寸和内容换行需要一起检查，防止容器收缩时溢出。

四、与媒体查询配合

视口级规则仍适合控制页面整体导航、主列数和全局密度；容器查询适合控制可复用组件内部排布。两者可以组合，但应避免同一组件由互相冲突的断点控制。

旧浏览器支持范围需要明确。可以先提供可靠的流式布局，再用容器查询增强复杂排布。

五、验证不同嵌套场景

同一组件应放入侧栏、主内容区、弹层和窄屏中检查。仅在完整页面宽度下验证，无法发现嵌套容器导致的问题。

六、总结

容器查询让组件按实际可用空间自适应。为查询容器选择稳定边界，优先采用流式布局，并在多种嵌套尺寸中验证，可以提高组件复用质量。