What is the best unit to use in Mediaqueries?
I would like to know what do you suggest to mediaqueries?
I'm using this, its ok???
$breakpoint-xxs: 19.999rem; // 319,98px
$breakpoint-xs: 35.999rem; // 575,98px
$breakpoint-sm: 47.999rem; // 767,98px
$breakpoint-md: 59.999rem; // 959,98px
$breakpoint-lg: 74.999rem; // 1199,98px
$breakpoint-xl: 87.499rem; // 1399,98px
But I don't know If It's better use EM or PX directly.
I never use EM but I read this article and now I'm more confused https://zellwk.com/blog/media-query-units/
Thanks
PX, EM or REM Media Queries? | Zell Liew
Have you wondered if you should use
px,
em or
rem for media queries? I had the same question too, and I never figured it out, not till now.
When I first created the
mappy-breakpoint
library, I used
rem units. Then
after a conversation
with Sam Richard, I quickly switched to
em instead because I found out there isn't a differen...14 Replies
Safari somewhat recently fixed that issue, so using
px is fine.
Curious why the .999 instead of just using round numbers though?
Unless you have one for max-width and one for min-width?Thanks @Kevin for your reply.
I took that idea from Bootstrap. I was thinking it's Ok do that. Here the info of the website of Bootstrap. https://getbootstrap.com/docs/5.0/layout/breakpoints/#max-width
But now, reading better, I need to do that only when I use max-width right?
Breakpoints
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
But now, reading better, I need to do that only when I use max-width right?yup. it's so there's no overlap... if not, and you have both a min-width and max-width, then there is 1px where both are working
I suggest using
em instead of px because the breakpoints should be content-based, and the content should also be in em and not px, so when the content is ready to "break" then you set a breakpoint, but you can't do that well with px. If the user has changed their default font size then your px and em calculations will be wrong and they site will break at odd points instead of where you expect.thanks!!! ❤️
Does not work that way, it's a hard value and will not change breakpoints based on font size. Least from what I tested, would love to be proved wrong though.
yeah, b1 is right here...
em in media queries doesn't look at font-size, either does rem... it's actually part of the spec to work that way
if browsers are consistent in how they use
px now (which they seem to be), no difference between any of themI’ve…I’ve been wrong this entire time ‽‽‽‽
😭
It's one of those really bizarre edge cases that definitely gives off "because CSS" type vibes 😅
Might be worth a YT short, @Kevin
So back on this cause another post was made #Mediaqueries general questions .. Willy will got me to retest and REM does use the Users font-size but not the Roots
I'm still on the fence about this cause I don't see the use case where this would cause a intended behavior rather than just be a off calculation.
All of it is so edge-case-y, I think overall, it doesn't matter most of the time tbh 😄