em and rem units with media queries
Hey folks in one of kevin video i saw him using em and rem units with media queries for setting max-width, min-width etc. in them why is that don't we require px unit to set the breakpoints
7 Replies
it's not required, no. Using em or rem would change the breakpoint to be dependent on the user's set font size if they changed , rather than the actual width of the screen in pixels
yeah that's why I was asking if user will change the font size then the breakpoints will change but what I can't understand why kevin used that
Say you wanted a certain width of text to display. Then you might use
rem or ch.Content, in general, should be what defines the layout, and not the other way around.
If a user has a larger font-size as their default browser setting, I like the idea of this being treated like it's been zoomed in. It's not exactly the same, but it's very similar.
Also, for a long time, Safari had a bug in how it treated media queries when a user zoomed in and out. They recently fixed it, but it used to be that if you zoomed in/out, Safari acted in a different way than Chrome and Firefox in how it handled the media query if you used
px or rem.
They all would treat em the same.
And em in media queries doesn't look at the font-size of the HTML element, neither does rem. In any case, they look at the browser settings.
That said, no harm in using pixels, or remThank you so much Kevin for clarifying this also I just read an article by zwell which explained this in very detail by taking different case scenario how these three units will perform in those scenario em was most consistent unit there after that pixel was consistent.
yeah, that's the best example of it, but like I said, Safari has since fixed that. It was relatively recently though
thank you so much Kevin once again and I have say that you are the best person on internet to get solution if you getting any issue with CSS you have video on almost every CSS issue and other things I really liked your recent video on particle effect with pure CSS I look forward to your future videos