问题
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?
回答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.
回答2:
Just for info, if it helps, it's possible to use rem . It solves the problem of "cascading size" with em. If you set
body { font-size :62.5 %; } /* Trick to have 1em =10px */
li {font-size:1.4em; }
your <li> will be 14px, but if you have a list in a list, the second level <li> will be at 20px, and at third level will be 27px, etc..
With rem ( means "root em" ), all <li> are at the size you define.
More info : http://snook.ca/archives/html_and_css/font-size-with-rem
and http://www.pompage.net/traduction/dimensionner-ses-fontes-avec-rem ( in french )
来源：https://stackoverflow.com/questions/12450961/responsive-layout-px-em-or