CSS Units when to use them?

Hey, my first post in this amazing website and hopefully community

I’m confused, there are a bunch of css units, px, vh, vw, etc,…

I’m deep into the first module with the Responsive Design and so far I’ve been using a lot of vh and vw units, that’s when I switched to a bigger screen and everything went awfully bigger.

I used px´s before and sucks as well,

% only seems to work when there’s a DIV with some specific px measures,

Do you guys have practical examples of when to use them?

Like vw and vh for divs and containers maybe?
Px for text?

Let me know

There’s no hard rules as to what to use but you need to be aware of how these different units work.

Websites are also designed to be responsive and change the css dynamically when the screen size changes using media queries

It’s fairly common to have media queries for a couple screen sizes which change the layout and size of elements. Some people use css libraries to do this out of the box. The goal is to make your site accessible and look good on various devices.

Text can be handled using rem usually for example.

For containers you should factor in things like grid or flexbox and how the items take up space.

to sum it up, I think it’s best to work on projects to see what the best solution is for your specific project layout

1 Like

I agree with @Jimbalin that context matters and so there are no (or very few) hard rules as to what units to use for specific situations. I will say though that I always try to use rem units as much as possible, especially for width-related properties. And I always use rem for media query break points based on viewport width (I can’t remember the last time I didn’t). The advantage to using rem is that it takes into account not only the width of the view port but also the size of the text on the page. Most browsers do a “page zoom” by default, but it is possible to do a “text only zoom” (Firefox has this built into the browser and you can add an extension for Chrome-based browsers). And all browsers allow the user to set a larger default font size. To me this is an accessibility issue. If someone needs the text size to be larger than normal then using rem allows the page to reflow nicely for larger text sizes.

So I guess I’m saying that I recommend you try to use rem as much as possible, at least for elements that contain text, because it makes it easier for people with low vision disabilities to read your page.

1 Like

I’m starting to notice that there are a bunch of ways to do the same thing is just a matter of practising and see what works for me! Thanks!

REM units have always been a bit confusing to be honest Ill give it a try though!