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?
In using “height” in paddings or margins, you should use % instead of px, in case your website is responsive. Because the big deal about responsive is: it's responsive. It should be responsive, so make it responsive. Pixels are not responsive.
Unlike PX, relative units like %, EM, and REM are better suited to responsive design and also help meet accessibility standards. Relative units scale better on different devices because they can scale up and down according to another element's size.
If you use px as the unit for fonts, the fonts will not resize whereas the fonts with rem / em unit will resize when you change the system's font size. So use px when you want the size to be fixed and use rem / em when you want the size to be adaptive/dynamic to the size of the system.
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.
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 )
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With