容器查询(Container Queries) image.png 介绍 容器查询@container类似于媒体查询@media,区别在于查询所依据的对象不同。媒体查询依据的是浏览器的视窗大小,容器查询依据的是元素的父元素或者祖先元素的大小。 有关容器查询的属性一共有三个,分别是container-type、container-name、container。 container-type:标识一个作为...
有关容器查询的属性一共有三个,分别是container-type、container-name、container。 container-type:标识一个作为被查询的容器,取值范围为size、inline-size、block-size、style、state container-name:被查询的容器的名字 container:container-type和container-name的简写 使用方法 首先需要使用container-type或者container属性...
The CSS container-type property is part of the Container Queries feature used to register an element as a container that can apply styles to other elements
container-type: size; } @container (width < 250px){ .card{ color: #14AE5C; } } 白白浪费了一层标签。 也无法通过:has去匹配父级 .card{ /**/ container-type: size; } @container (width < 250px){ body:has(.card h2){ color: #14AE5C; } } 还有一点问题更大,容器必须手动指明尺寸,不...
.wrapper{container-type:inline-size;} 有了这些,我们就可以开始查询一个组件。在下面的例子中,如果.card元素的容器的宽度等于400px或更大,我们需要添加一个特定的样式。 代码语言:javascript 代码运行次数:0 复制 Cloud Studio代码运行 @container(min-width:400px){.card{display:flex;align-items:center;}} ...
demo_container_wrap .container { /* container-name: test; */ container-type: inline-size; /* container: test / inline-size; */ } .demo_container_wrap .container h1{ font-size: 1.5em; } .demo_container_wrap .container p:last-of-type{ display: none; } @container (min-width: 400px...
该container-name属性用于将元素注册为容器,并根据容器的大小和样式将样式应用于其他元素。该container-type属性用于将一个元素注册为一个容器,当满足某些条件时,可以将样式应用于其他元素。属性是将和属性组合成单个声明container的简写。container-namecontainer-type...
.card{/**/container-type:size;}@container(width<250px){.card{color:#14AE5C;}} 1. 2. 3. 4. 5. 6. 7. 8. 9. 白白浪费了一层标签。 也无法通过:has去匹配父级。 复制 .card{/**/container-type:size;}@container(width<250px){body:has(.card h2){color:#14AE5C;}} ...
首先,我们需要在定义container-type。然后,使用@container开始查询。一旦满足了这个条件,CSS将应用于该容器内的组件。 样式查询 简单地说,样式查询让我们查询一个容器的CSS属性或CSS变量。 样式查询仍然是试验性的,目前只在Chrome Canary中实现。要测试它们,请进入chrome://flags并激活 "Experimental Web Platform featur...
container-type: inline-size; }.containerp{font-size:clamp(.75rem,calc(100cqw /40),2rem); } 表示文字字号在0.75rem-2rem之间变化,字号是2.5%容器宽度,算算,一行可以放40个汉字。 实现的效果如下GIF所示: 眼见为实,您可以狠狠地点击这里:CSS @container查询让字号随宽度变化demo ...