内在尺寸与容器依赖尺寸模式

1/* 图像的固有尺寸 */
2img {
3  max-width: 100%;
4  height: auto; /* 保持宽高比 */
5}
6
7/* 容器查询的使用 */
8.container {
9  container-type: inline-size; /* 声明用于查询的容器 */
10}
11
12@container (min-width: 400px) {
13  .child {
14    display: flex;
15    gap: 1rem;
16  }
17}