CSS style - percentage vs em vs px?

Question

After reading several articles on the web I´m a bit confused about when to use percent, em or px for div´s, input´s, font´s, buttons and so on...

For the site I´m working on we wan´t to add a responsive design, and from what I understand from different articles than percent is the way to go for elements and div´s. But than I get confused because I´m thinking that I should be able to get a responsive design even if I use px för layout and than set different width, height in px depending on device/screen resolution...?

And is there a best practice for when to use what? And not only for fontsize, but for div´s and another elements as well?

Solution 1

As far as I could realize, the length values in %, em, px, pt are just different measures you have to apply to get things done in your CSS layout. There's no rule at all to use them.

Fact is, it's hard to tell you what you have to do with them because is hard to tell what you are to achieve in each of your layouts. Layouts are about creativity, and you can't just fix an approach to fit all of them.

What I can do is tell you the basics, but you probably already know it: you'll have some absolute values (cm, mm, in, pt, pc, px) and some relative values (text based: em, ex, ch, rem; viewport based: vw, vh, vmin, vmax). Relative measures changes as they "base" changes.

I personally found myself using a lot of the common, absolute ones. But we can never tell what you're trying to achieve. So its good to have the official documentation in hand so you can always find the best way for each of your layouts challenges.

Luck!

Solution 2

The main advantage of using em is that it actual size depends on the settings of the user, namely the size of the default font. So Users that prefer big type increase this value. Percentages create a kind of static layout, even if it flexible in size, combined with min- and max-height/width this can lead to quiet nice results. If you would like to have a flexible layout with columns, so that there is only one one small screens, two on bigger ones and three in maximum you will also have to use floats combined with (min-/max-) width / height.

In general I would not begin with questioning the best unit, furthermore I would begin a basic concept about how the layout should work. Sometimes it turns out that using javascript for the whole Layout is the fastest and most reliable solution, so however, the unit to use depends on your special goal and a »this is the best solution« does not exist for this question in general, that is what state.

Greetings..