@container 规则

最新推荐文章于 2024-04-16 17:45:13 发布

静静子~

最新推荐文章于 2024-04-16 17:45:13 发布

阅读量966

点赞数

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36963245/article/details/127121047

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原文地址：介绍2022最期待且已正式支持的CSS container容器查询

@container 可以实时匹配容器的尺寸，开发者们可以根据不同的容器尺寸范围，对内部的样式实现对应的布局和样式。

媒体查询 @media

@media (max-width:1024px) {}

该规则会在屏幕小于 1024px 时执行。
@container规则有些与之类似，只是匹配的尺寸对象不同
@media匹配的是浏览器窗体，而@container匹配的是某个元素。

@container 基本使用

效果：默认文字居中对齐；当宽度小于 500px 时，字体显示为红色，文字左对齐。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      padding: 100px;
    }

    .container {
      container-type: inline-size;
      background-color: #ccc;
    }
    
    .container p{
      text-align: center;
    }
	/* 当宽度小于 500px时，渲染 @container 规则中的语句 */
    @container (max-width: 500px) {
      .container p {
        text-align: left;
        color: red;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  </div>
</body>
</html>

container 属性

container 属性是 container-type 和 container-name 这两个属性的缩写

container-type

指示容器的方向

container-type: normal; // 默认，表示不建立容器元素
container-type: size; // 表示水平和垂直方向都建立
container-type: inline-size; // 只在水平方向建立

container-name

container-name的作用是给容器元素命名，这个属性在页面中存在多个容器元素的时候很有用。

假设如下CSS代码：

@container (max-width: 480px) {
   p {
    font-weight: bold;
  }
}

如果页面中存在多个容器元素，则这些元素中的

元素都会应用 font-weight:bold，但我们的初衷可能就只有某一个容器元素才应用相关样式，此时 container-name 就很有作用了。

例如：

.container-a {
    container: inline-size aside;
}
.container-b {
    container: inline-size banner;
}
@container banner (max-width: 480px) {
  p {
    font-weight: bold;
  }
}

此时，只有banner这容器元素内的

元素才会文字加粗。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      padding: 100px;
    }

    .container-a {
      container-type: inline-size;
      container-name: aside;
      background-color: #ccc;
    }

    .container-b {
      container-type: inline-size;
      container-name: banner;
      background-color: pink;
    }

    p {
      text-align: center;
    }

    @container banner (max-width: 500px) {
      p {
        text-align: left;
        color: red;
      }
    }
  </style>
</head>
<body>
  <div class="container-a">
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  </div>

  <div class="container-b">
    <p>测试2测试测试2测试测试2测试测试2测试测试2测试测试2测试测试2测试测试2测试测试2测试</p>
  </div>
</body>
</html>

一些容器尺寸单位

单位名称	释义
cqw	表示容器查询宽度（Container Query Width）占比。1cqw等于容器宽度的1%。假设容器宽度是1000px，则此时1cqw对应的计算值就是10px。（和 vw类似，只不过一个是相对于容器宽度，一个相对于视口宽度）
cqh	表示容器查询高度（Container Query Height）占比。1cqh等于容器高度的1%（和vh相似）。
cqi	表示容器查询内联方向尺寸（Container Query Inline-Size）占比。默认情况下，Inline-Size指的就是水平方向，对应的是宽度，因此，1cqi通常可以看成是容器宽度的1%。
cqb	表示容器查询块级方向尺寸（Container Query Block-Size）占比。默认情况下，Block-Size指的就是垂直方向，对应的是高度，因此，1cqb通常可以看成是容器高度的1%。
cqmin	表示容器查询较小尺寸的（Container Query Min）占比，例如容器尺寸是300px*400px，则100cqmin对应的是尺寸较小的宽度300px，而非高度（和vmin相似）。
cqmax	表示容器查询较大尺寸的（Container Query Min）占比（和vmax相似）。