Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Responsive Layout - PX, EM, or %?

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?

like image 434
L84 Avatar asked Sep 16 '12 21:09

L84


People also ask

Is px good for responsive?

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.

Is em good for responsive design?

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.

Is it better to use em or px?

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.


2 Answers

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.

like image 86
Ana Avatar answered Oct 01 '22 23:10

Ana


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 )

like image 21
Piccolina Avatar answered Oct 02 '22 01:10

Piccolina