CSS 容器查询实战：让组件根据父级宽度自适应
原创
CSS 容器查询实战：让组件根据父级宽度自适应
用户12771345
发布于 2026-09-23 11:06:29
发布于 2026-09-23 11:06:29
概述
媒体查询一直是我们做响应式布局的主要手段，但它只能基于视口宽度做判断。当页面中出现侧边栏折叠、卡片容器宽度变化这类场景时，组件拿不到自己所在容器的实际尺寸，只能靠 JS 去测量，或者用一堆额外的类名硬编码。CSS 容器查询（Container Queries）解决的就是这个问题：先声明一个元素为容器，再让内部子元素根据容器的宽度、高度或方向来应用样式。这一特性在主流浏览器已经可用，配合 conta
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号