css-cqw和cqh

cqw 和 cqh 是 CSS 中相对较新的单位，属于容器查询（Container Queries）的一部分。它们是为了增强响应式设计的灵活性和控制能力，特别是在设计复杂的布局时。

1. 什么时候出来的？

cqw 和 cqh 是随着 容器查询（Container Queries）功能的推出而出现的，容器查询是 CSS 4 的一部分，旨在提供基于父容器的尺寸来动态调整元素样式的能力。容器查询在 2021 年左右开始在浏览器中实验性支持，之后逐步完善。

2. 特性

• **cqw**: 是 container width 的缩写，表示相对于父容器宽度的单位，类似于 vw（视口宽度单位），但是它是基于父容器宽度来计算的，而不是视口的宽度。
• **cqh**: 是 container height 的缩写，表示相对于父容器高度的单位，类似于 vh（视口高度单位），但它是基于父容器高度来计算的，而不是视口的高度。

3. 有什么特性？

• 响应式布局：这两个单位使得设计师和开发者能够更加精确地控制元素在不同尺寸的容器中的展示效果。例如，可以使某些元素根据容器宽度或高度的变化调整大小，而不是单纯依赖于视口尺寸。
• 更细致的控制：与传统的 vw、vh 或 em 单位不同，cqw 和 cqh 让你可以更加精细地根据父元素的实际尺寸进行调整。
• 提高适应性：它们特别适用于设计具有复杂布局和嵌套容器的网页，提升了设计的灵活性和适应性。

4. 示例代码

cssCopy Code.container {
  width: 100%;
  height: 100%;
  container-type: inline-size; /* 启用容器查询 */
}

.element {
  width: 50cqw; /* 宽度为父容器宽度的50% */
  height: 30cqh; /* 高度为父容器高度的30% */
}

5. 总结

cqw 和 cqh 通过提供容器相关的单位，极大增强了 CSS 中响应式设计的灵活性和控制力，尤其是在处理具有不规则尺寸或动态调整的容器时。