https://blog-go3.pages.dev/tags/css/ Recent content in Css on 我的博客 Hugo zh-cn Thu, 10 Apr 2025 09:30:00 +0800 https://blog-go3.pages.dev/posts/container-queries/ Thu, 10 Apr 2025 09:30:00 +0800 https://blog-go3.pages.dev/posts/container-queries/ <h2 id="从-media-queries-到-container-queries">从 Media Queries 到 Container Queries</h2> <p>Media Queries 基于视口尺寸，这要求组件在不同页面中表现一致——但实际布局千变万化。</p> <p>Container Queries 让组件根据<strong>自身容器</strong>的宽度响应，真正实现组件级自适应。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">card-wrap</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">container-type</span>: <span style="color:#66d9ef">inline</span><span style="color:#f92672">-</span><span style="color:#66d9ef">size</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>@<span style="color:#66d9ef">container</span> <span style="color:#f92672">(</span><span style="color:#f92672">min-width</span><span style="color:#f92672">:</span> <span style="color:#f92672">360px</span><span style="color:#f92672">)</span> { </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">card</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">grid</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">grid-template-columns</span>: <span style="color:#ae81ff">1</span>fr <span style="color:#ae81ff">2</span>fr; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h2 id="关键特性">关键特性</h2> <ul> <li><code>container-type</code> 定义查询上下文</li> <li><code>@container</code> 按容器尺寸应用样式</li> <li>支持 <code>cqw</code> / <code>cqi</code> 等容器单位</li> </ul> <h2 id="实践建议">实践建议</h2> <ul> <li>组件设计之初就考虑容器语义</li> <li>与 CSS Grid <code>auto-fit</code> 配合，减少嵌套查询</li> <li>兜底方案：无支持时保持基础单列布局</li> </ul>