css - Responsive Layout - PX, EM, or %?

Question

I am building a responsive page layout and it works great so far, but I have a question:

Should I be using em, px or %?

For example, I want to have border radius applied to an element. Should I use this code:

border-radius: 1.563em;

Or this:

border-radius: 25px;

Should I be using ems for similar properties or should I stick with px?

Answer 1

Generally, don't use px for responsive layouts.

If you use a px-based media query, then your layout may end up looking like crap when the user zooms. And unfortunately, that I know all to well because I made that mistake too.

Regarding your example with border-radius, you may discover the two look really different when the font-size is increased - demo. The first and the third use px for border-radius, while the second and the fourth use em.

But there will be exceptions and if something doesn't feel right on zoom (for example, a box-shadow that looks exaggerated), try it with px as well.

Also check this article.