Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 12, 2021 05:59 pm GMT

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 input or comments, do not hesitate to let me know in the comments.


Original Link: https://dev.to/bluec4p/when-and-where-i-use-px-rem-vw-and-vh-3bhp

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To