CSS中的容器查询简介

> CSS容器查询：革新响应式设计>

本摘录摘自

释放CSS的功率探索容器查询在制作适应性和弹性的Web组件中的变换潜力。 与对整个浏览器窗口大小做出反应的视口媒体查询不同，容器查询允许基于元素的可用空间造型，从而启用了真正的组件级响应率。

容器查询与视口媒体查询

> >传统的基于视口的响应设计依赖于与简化的设备尺寸（移动，平板电脑，台式机）绑定的断点，通常与布局网格相结合。 这种方法与各个组件适应性斗争；较大的元素可能会分别进行调整，但通常遵循全局断点。>

>容器查询提供了出色的解决方案。 以下图像演示了具有容器查询样式的卡组件，完全独立于视口尺寸。 该卡的外观动态适应了其可用空间。

>注意：自Firefox 110以来，存在对容器查询的广泛支持。polyfills可用于旧浏览器。

定义容器查询

>使用容器查询，首先将元素声明为使用

>属性的容器。 （相当于水平写作模式中的宽度）是最常见且受到广泛支持的值：>

接下来，采用 attrule来定义查询。 下面的示例将容器的宽度为40ch或更大时，将其

颜色设置为蓝色： container-type inline-size>对于跨写作模式的更广泛的兼容性，请使用逻辑属性：>

<code class="language-css">.container {
  container-type: inline-size;
}</code>

超越

，选项包括@container>和h2。请咨询官方规范以获取更多详细信息。

<code class="language-css">@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}</code>

>升级卡组件：一个实践示例

<code class="language-css">@container (inline-size > 40ch) {
  h2 {
    color: blue;
  }
}</code>

>

>无容器查询，卡片变化通常涉及与视口断点相关的修改器类。 下图展示了三个卡尺寸及其相应类的图像。inline-size> block-sizeaspect-ratio

[codepen演示：视口媒体查询卡]（链接到codepen） 使用容器查询，我们维护默认的卡样式（用于未支撑的浏览器），并根据容器宽度定义其他样式：

• 350px或更大：水平布局
• 600px或更高：图像为背景
>

[codepen演示：卡片的容器查询]（链接到Codepen）

此摘录来自>释放CSS的功能：用于响应式用户界面的高级技术，可在SitePoint Premium上获得。

钥匙要点：

>集装箱查询提供组件级响应能力。
它们是使用
• 和container-type>的定义的。 @container逻辑属性增强了交叉写模式的兼容性。
• >他们提供了一种比视口媒体查询更灵活，更精细的响应设计方法。
>

（注意：如果有的话，用实际的Codepen链接替换为“链接到Codepen”。）

以上是CSS中的容器查询简介的详细内容。更多信息请关注PHP中文网其他相关文章！