容器查询@container类似于媒体查询@media,区别在于查询所依据的对象不同。媒体查询依据的是浏览器的视窗大小,容器查询依据的是元素的父元素或者祖先元素的大小。

    有关容器查询的属性一共有三个,分别是container-type、container-name、container。
    container-type:标识一个作为被查询的容器,取值范围为size、inline-size、block-size、style、state
    container-name:被查询的容器的名字
    container:container-type和container-name的简写

    首先需要使用container-type或者container属性指定一个元素作为被查询的容器。然后使用@container进行容器查询。

    1. <template>
    2. <div id="app">
    3. <div>
    4. <button @click="add" id="add">+</button>
    5. <button @click="sub" id="sub">-</button>
    6. </div>
    7. <div class="demo">
    8. <a>我的背景色会随着demo元素的宽度而变化</a>
    9. </div>
    10. </div>
    11. </template>
    12. <style>
    13. .demo {
    14. width: 200px;
    15. height: 200px;
    16. background: red;
    17. container: inline-size;
    18. }
    19. @container (inline-size > 300px) {
    20. a {
    21. background: green;
    22. }
    23. }
    24. </style>