When and where I use px, rem, vw and vh

osamaml

Osama

Posted on September 12, 2021

When and where I use px, rem, vw and vh

Hi everyone.

I have decided to create a post to share my point of view about units of measure in CSS.

All that I am going to put next are things that I have learned in open source and personal projects, that is, by practicing a lot.

I'm just going to talk about the units of measurement that I usually use. And it should be noted that the use cases that I am going to present are to make a responsive design

px (pixel) : px I only use it in very isolated and small cases, for example. When I want to give a fixed font size or even for fixed margins and paddings.

px-example-html

px-example-css

rem (root em) : I use rem for the same elements in px, but with the difference that it is something variable or responsive, for example text fonts and responsive spacing.

rem-example-html

rem-example-css

vh (view height) - vw (view width): These two measurements, being a reference to the size of the screen, are used to measure the layouts.

vh-vw-example-html

vh-vw-example-css

Thanks so much for reading.
If you have any suggestion, let me know it in the comments.

💖 💪 🙅 🚩
osamaml
Osama

Posted on September 12, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related