need help in switching `px` based media query to `em` based media query
Hey, folks after finding out that
em is better unit to use with media-query instead of px I have decided to switch from px to em based mediq query. So, lets say I have this media query in px
so, can I write it like this in em assuming user root font-size is 16px
24 Replies
Do you mean rem? Not em?
I'm pretty sure you mean rem
I mean em
em is the best unit to use media query
You should not use em for really anything other than font size and MAYBE some padding
em is not
It's super specific
looks like you haven't read this blog yet
kevin also uses em for media query
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...this article explains why
em is better unit to use with media query instead of px or remrem and em acted similarly except for a weird glitch this user experienced on safari which we have no idea if anyone else could ever replicate. It's a sample size of 1
Em is meant to be relative to the closest parent element, while rem is meant to be relative to the root. It's a consistent value across the entire page
not only this user evryone faced that issue
as I said even kevin prefers em for media query
I mean either way, to answer your question
Divide everything by 16
please read the full article by this article we can conclude that rem is worst unit for media query
The bug was fixed according to webkit
So now there's no difference
Rem is a better signifier as to what you're actually doing, which is using the root font size.
https://bugs.webkit.org/show_bug.cgi?id=156684
That blog you sent was written in 2016
okay but some days I posted question related to this and there kevin said that we should still use em and I would like to go with kevin opinion
here you are wrong in the case of em in media query they will not be influnced by the closes parent instead they will be influnced by user internal font settings
That's more than fine, there's no difference anymore. It's just confusing on a read over. You don't define widths in em, so defining max widths or min widths in em for media queries seems counter intuitive
And that's because the closest parent is the root element
So while it works, it's using old logic based of an old bug that was resolved
if you will define font setting on html root or body em in media query will not be influced the article explains this
it maybe old but it still holds up
That's what I'm saying. It works the exact same as rem. It's just counter intuitive is all I'm saying. Just because a workaround still works doesn't mean it should be used in place of the original mechanism meant for this exact problem
okay but now can you tell me how can i convert myy px based query to em/rem based
Sure, just divide everything by 16
And replace the word px with em
thank you so much for the clarification of all my doubts and where I was wrong
hey since you are a designer also so, do you use figma if yes can you recommend me some good resources etc to learn figma
There's this one guy who really does a great job showing redesigns and tools in figma on YouTube. His channel is designcourse. My opinion’s slightly differ from his but he really does a great job overall
ok
I only skimmed through this, but since it's based on advice I gave, I feel like I should chime in 🙂
Now,
em, rem and px will behave the same in all browsers when used in media queries, so use whatever you're most comfortable with.
As for em in media queries, it will work exactly the same as rem, and neither of them will look at the font-size on the html. They look at the base size in the browser settings only. This is only true when they're used in media queries.
In newer content, you'll see me use all three units in media queries.
In practice, I tend to still use em because it's a habit that I have now, and since it works the same as rem (in the context of media queries), it's one less character to write 😅
In videos now, depending on which on you watch, I might use rem or px, simply to avoid having questions about why I'm using em, and because there's no real benefit to it anymore since webkit/Safari fixed the bug there.I use px, since screen sizes are (usually) defined in pixels, it's the easiest way to set your sizes, not rems, not ems. No extra math to know what size is 120rem.
I also use tailwindcss and I used the very similar approach in my old custom made styles. And since guys/girls from tailwind use px for breakpoints and share the similar opinion to writing CSS as I do, I believe them it's the best practice. I have 10+ years of professional experience in CSS, but I am not an influencer like Kevin lol.
Careful though, screen pixel != css pixel.
A CSS pixel is a fixed, physical unit of measure like a
cm or inch. Screen pixels vary from device to device.Of course, screen in pixels is not same as it's width in CSS pixels, due the pixel ratios and whatnot, but the default breakpoints defined by tailwind (and other css frameworks) will work with 95% of devices without any extra tweaks, so usually there is no need to spend too much time to define your own custom made breakpoints. You can just borrow from them.