This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Container queries come with their own units.
Container query units work the same as viewport units. 80cqi equals 80svi.
div {
outline: 10px solid;
}
h2 {
background-color: yellow;
border: 5px solid;
inline-size: 80cqi;
}It's me, Mike D!
The big difference is that if they're inside a size container, container query units aren't relative to the viewport anymore, but to the container.
div {
outline: 10px solid;
container-type: inline-size;
}
h2 {
background-color: yellow;
border: 5px solid;
inline-size: 80cqi;
}It's me, Mike D!
| unit | relative to |
|---|---|
| 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 cqi or cqb |
| cqmax | The larger value of cqi or cqb |
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-01-11T09:38:54+00:00) Day 78: container query units. Retrieved from https://www.scien.cx/2023/01/11/day-78-container-query-units/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.