CSS style - percentage vs em vs px?
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?
Answer
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!