🛑 Stop using pixels in CSS

I use it for font-size/margin

But for borders/border-radius and media-queries I still use pixels.

I'm actually not 100% sure on the "best" answer, but this is my gut feeling and it works well.

Chris Bongers I was thinking the same thing. Border radius would probably give some wacky results if using rems. And media queries probably wouldn't work very well either. Thanks for the response :)

Awesome, that's some cool stuff!

Good question Prateek Aher it comes down to accessibility.

So if you set your browser default to be 20px because of your bad eyes or whatever reason. rem is a way better solution, then us defining what would be best for you.

For borders and media queries however it is still a valid point of using px.

Also can't live without vw and vh :D

Yeah, it's the zooming (manually or by default) which wouldn't change using px values.

if rem is directly proportional to px, what advantage does it possibly hold

The answer is that it isn't directly proportional. It depends on the font size. The formulas and converter work under the assumption of default font size.

It's like those measuring cups that have kg and liters, do you have one in your kitchen? They only measure liters, so the kg is a misleading lie. But because most kitchen-liquids have density close to that of water, it's a sort-of-useful trick anyway.

Same with rem and px: most users will be using 16px = 1rem so it's a good starting point, but the whole reason rem is better is because sometimes 1rem != 16px.

Mark Exactly is based on the root font-size (HTML) so hence I included that in my calculator.

You must keep in mind screenreaders and some mobile devices have a bigger font-size by default.

People could also use accessibility tools that don't necessary use the zoom function.

Wow, thank you Rahul, means a lot to me. Especially coming from you. 🤟

Chris Bongers Haha.