Frontend on 编程心语 https://www.ithome.me/tags/frontend/ Recent content in Frontend on 编程心语 Hugo zh-CN Tue, 04 Aug 2026 14:59:27 +0800 CSS Container Queries 实战：告别媒体查询，实现真正组件级的响应式设计 https://www.ithome.me/post/2026/07/27/css-container-queries-practical-guide/ Mon, 27 Jul 2026 08:00:00 +0800 https://www.ithome.me/post/2026/07/27/css-container-queries-practical-guide/ <h2 id="为什么需要-container-queries">为什么需要 Container Queries？</h2> <p>传统响应式设计依赖 <code>@media</code> 查询，它只能根据<strong>视口</strong>（viewport）尺寸调整样式。但现代 UI 中，一个组件可能在侧边栏、弹窗、全屏页等不同宽度的容器里复用——媒体查询完全无能为力。</p>