Important - this code only works on browsers with container queries enabled个
如何同时使用多个条件进行容器查询？使用@media查询的语法似乎不起作用.
在本例中，背景根据元素的宽度和高度更改为黄色(调整其大小以查看).但是结合这些条件来使背景变成蓝色是行不通的.
.tile {
width: 100px;
height: 100px;
border: 1px solid black;
resize: both;
overflow: auto;
container-type: size;
container-name: tile;
}
.tile__inner {
width: 100%;
height: 100%;
}
@container tile (min-width: 100px) {
@container tile (min-height: 100px) {
.tile__inner {
background: yellow;
}
}
}
@container tile (min-width: 100px) and (min-height: 100px) {
.tile__inner {
background: blue !important;
}
}<div class="tile">
<div class="tile__inner"></div>
</div>