Slightly gem from Kevin Powell’s “HTML & CSS Tip of the Week” web site, reminding us that utilizing container queries opens up container question models for sizing issues primarily based on the dimensions of the queried container.
cqiandcqbare much likevwandvh, however as an alternative of caring concerning the viewport, they care about their containers dimension.
cqiis your inline-size unit (often width in horizontal writing modes), whereascqbhandles block-size (often peak).
So, 1cqi is equal to 1% of the container’s inline dimension, and 1cqb is the same as 1% of the container’s block dimension. I’d be remiss to not point out the cqmin and cqmax models, which consider both the container’s inline or block dimension. So, let’s imagine 50cqmax and that equals 50% of the container’s dimension, however it is going to have a look at each the container’s inline and block dimension, decide which is bigger, and use that to calculate the ultimate computed worth.
That’s a pleasant sprint of conditional logic. It may well assist preserve proportions for those who suppose the writing mode would possibly change on you, equivalent to shifting from horizontal to vertical.
