css如何实现容器查询

魁首哥

作者

css如何实现容器查询

这篇文章主要为大家展示了“css如何实现容器查询”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css如何实现容器查询”这篇文章吧。

容器查询

1. 基本概念

容器查询使我们能够根据其父元素的大小设置元素的样式，它类似于 @media查询，不同之处在于它根据容器的大小而不是视口的大小进行判断。这一直是响应式设计的一个问题，因为我们有时候希望组件能够适应它的上下文。

css如何实现容器查询

2. 使用方法

对于容器查询，需要使用 container 属性（它是 container-type 和 container-name 的缩写）指定一个元素作为容器。container-type 可以是width、height、inline-size、block-size。inline-size 和 block-size 是逻辑属性，根据文档的写入模式，它们可能会产生不同的结果。

main,aside{container:inline-size;}

可以使用类似于媒体查询的方式来使用@container。需要注意，两者在括号中表达规则的方式有所不同（在容器查询中应该使用 inline-size > 30em 而不是 min-width: 30em）。这是媒体查询 4 级规范的一部分。当容器宽度大于 30rem 时，就切换到 flex 布局：

@container(inline-size>30em){.card{display:flex;}}

CSS Containment Level 3 规范目前处于工作草案中，这意味着语法可能随时改变。