CSS 容器查询实战：让组件真正响应父容器尺寸
原创
CSS 容器查询实战：让组件真正响应父容器尺寸
用户11716263
发布于 2026-10-28 08:33:29
发布于 2026-10-28 08:33:29
概述
做后台管理系统时经常遇到同一个卡片组件要放在侧栏和主内容区两个宽度差异很大的位置。以前只能用媒体查询配合父级传入的 class 来硬编码不同尺寸下的样式，或者用 ResizeObserver 监听父元素再把宽度写到 CSS 变量上。这两种做法要么和视口绑定、要么把布局计算搬进 JS，组件复用成本很高。容器查询（Container Queries）把响应式断点从视口下放到任意容器，组件只关心自己被放
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号