CH vs PX for container queries
Hey all what is your opinion on using ch units for mobile responsiveness for example
Or is pixels betteer for width in your opinion. I have seen @Kevin Powell use ch for making mobile responsivenes containers, but isn't it clunky?
5 Replies
it's not clunky, but can get complicated, in my opinion
cake viewport is a lie)
ch is the width of the character 0 for a specific font
and that is calculated based on the current size of the font
if your font is 12px and you use a monospace font, lets assume that 1ch=9px (75% the height)
now, the font size is 16px on another device, because the user is visually impaired or uses a small 1440p or 4k display, and needs a slightly bigger font
now, 1ch will be 12px
now, you do something and you assume that at at 100ch you want the layout to break
which ch do you mean? 1ch=9px or 1ch=12px?
another wrench: what if i have a bigger font on my phone? those 100ch will never be lower than the viewport resolution
what about an 8k display? 100ch will always be relatively tiny
if i use container queries, i use px
no matter what, 1px is-ish-ish-ish 1px-ish-ish-ish
(it will be 1px in the viewport but the I love ch for container queries, but only if I want the content to drive when the layout will change.
For example,
@container (width > 90ch) for going from a stacked layout to 3 columns, then I know my columns are ~30ch wide at a minimum.
Then, if a user has changed the font size (or I have) then I know I won't have super squished columns.
If it's more of a layout driven change, then I'd just use pixelsthat's an interesting point of view on container queries
Pixel change it is then (at least for a carousel of products )
Thank you all. Sidenote : There is nothing I hate more than making a product carousel in Vanilla Javascript
it is a pain to do it