Skip to content

Commit eb8e45f

Browse files
authored
update cq unit values (GoogleChrome#3721)
1 parent fa05974 commit eb8e45f

1 file changed

Lines changed: 1 addition & 1 deletion

File tree

site/en/blog/cq-polyfill/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ Then rewrite the previous code as:
9797

9898
To make container queries even more useful, you can use container-based unit values as well. The following table shows the possible container unit values and how they correspond to a container’s size:
9999

100-
<table><thead><tr><th>unit</th><th>relative to</th></tr></thead><tbody><tr><td><code>qw</code></td><td>1% of a query container’s width</td></tr><tr><td><code>qh</code></td><td>1% of a query container’s height</td></tr><tr><td><code>qi</code></td><td>1% of a query container’s inline size</td></tr><tr><td><code>qb</code></td><td>1% of a query container’s block size</td></tr><tr><td><code>qmin</code></td><td>The smaller value of qi or qb</td></tr><tr><td><code>qmax</code></td><td>The larger value of qi or qb</td></tr></tbody></table>
100+
<table><thead><tr><th>unit</th><th>relative to</th></tr></thead><tbody><tr><td><code>cqw</code></td><td>1% of a query container’s width</td></tr><tr><td><code>cqh</code></td><td>1% of a query container’s height</td></tr><tr><td><code>cqi</code></td><td>1% of a query container’s inline size</td></tr><tr><td><code>cqb</code></td><td>1% of a query container’s block size</td></tr><tr><td><code>cqmin</code></td><td>The smaller value of cqi or cqb</td></tr><tr><td><code>cqmax</code></td><td>The larger value of cqi or cqb</td></tr></tbody></table>
101101

102102
One example for how you would use container-based units is responsive typography. The viewport-based units (such as `vh`, `vb`, `vw`, and `vi`) can be used to size any element on the screen.
103103

0 commit comments

Comments
 (0)