JZTXT

[CSS 3] Container query

发布时间 2023-07-06 03:18:53作者: Zhentiw

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries

.container {
  container: article / inline-size;
}

h2 {
  font-size: 7cqw;
}

@container article(width<150px) {
    h2 {
       color: #ffc600;
    }
}

h2.fit {
    font-family: 'Operator Mono', 'monospace';
    --minFontSize: 10px;
    --letters: 12
    font-size: max(
      var(--minFontSize),
      calc(calc(100 / var(--letters)) *1.5cqw)
    );
}

The container query length units are:

  • cqw: 1% of a query container's width
  • cqh: 1% of a query container's height
  • cqi: 1% of a query container's inline size
  • cqb: 1% of a query container's block size
  • cqmin: The smaller value of either cqi or cqb
  • cqmax: The larger value of either cqi or cqb