Responsive Layout - Px, Em, or %

Responsive Layout - PX, EM, or %?

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.

Why em instead of px?

The reason I asked this question was that I forgot how to use em's as it was a while I was hacking happily in CSS. People didn't notice that I kept the question general as I wasn't talking about sizing fonts per se. I was more interested in how to define styles on any given block element on the page.

As Henrik Paul and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px, however, sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys Ctrl++ or Ctrl+-. So a good practice is to use em's instead.

Using px to define the width

Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have HTML-code that looks like this:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

A simple implementation would defining the width of the date-box class in px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

The problem

However, if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as flodin points out. This is because the box will remain the same size in width as it is locked to 50px.

Using em instead

A smarter way is to define the width in ems instead:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example, the font-size is defined in * as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.

Understanding px to em to percentages for responsive design

You can find more information about that formula on A List Apart

  target ÷ context = result

If we assume the body’s default type size to be 16px, we can plug each
desired font-size value into this formula. So to properly match our
header to the comp, we divide the target value (24px) by the font-size
of its container (16px):

  24 ÷ 16 = 1.5

So the header is 1.5 times the default body size, or 1.5em, which we
can plug directly into our stylesheet.

   h1 {
     font-family: Georgia, serif;
     font-size: 1.5em;        /* 24px / 16px = 1.5em */
   }

When dealing with text, em and % are pretty much equivalent:

100% == 1em
50% == 0.5em

When designing grids, I would straight up think in percentages (or columns) rather than do that conversion by hand.

Use px or % for responsive design

A good practice is to use % where it can be used because it reduces the effort of writing another code for responsive as it works according to the screen size but we use px also where % we cannot use % and then in
@media queries we write another css for that according to screen sizes.

For Example

Suppose we need to make 2 half width div inside a full width div we can write it in % like this

HTML

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

css

.parent{
  width:100%;
}
.child{
  width:50%;
}

Above % is successful because it div will resize according to the screen size.

In some cases we are not able to use % like we are creating buttons in a div which should be fix width and height then we can simply use px in width and if we need to resize in smaller screen then just use @media queries.

@media queries can be used multiple with defines screen sizes

Read THIS for brief about @media queries.

Best font size em or px to use for Website and Web apps?

This is an extremely subjective question. In addition, there are more options than just em and px: rem, em, px, vw/vh. Understanding how they all work is the key to picking which one is best for you and you app depending on the situation. Most of the time I use rem/em for responsive reasons, but there are times with vw/vh or px are a better option for me. It totally depends on what you're trying to accomplish.

How to use EMs and percentages for responsive design?

It is best practice to allow the browser's font size setting to affect your design–avoid setting the font-size of the body in pixels.

rem units are great for ensuring that everything scales proportionally to the browser font-size. em units are calculated based on the font-size of the parent element so they can become trickier to use when elements are nested. rem is always relative to the font-size of the html element (the root element). If you assume 1rem = 16px and build everything relative to that, then even if the user has set the browser so that 1rem = 20px, for example, then the entire design will scale up accordingly.

With responsive design, it is best practice to define media query "breakpoints" at screen widths where the content starts to become unusable (rather than at arbitrary widths based on popular devices). When your whole site is scaled up or down by the browser's font-size change, you will want the break points to also respect that font-size. However, since Safari treats rem media queries differently than other browsers, it is best to use em for media queries.

EM or Percentages for Responsive Website?

Try to use % as much you can for width for use main container or div also use min-width and max-width, keep font sizes on px or em don't change that values to %.

Defining a border width in PX vs EM on a responsive design

Instead of defining it in em, which you have said you're not happy with, define it in px but change the value to 2px or 3px, etc., as the site changes via media queries. Then you have definite control.

@media screen and (min-width:30em) { .border {border:1px;} }
@media screen and (min-width:50em) { .border {border:2px;} }

The disadvantage is if you are wanting small increments in the screen size and your CSS becomes book length. Then you are just being overly picky.

Issue mixing px and % for responsive layout

It is not necessary to give the content element an explicit width.

All you need to do is to give it a top and left margin, to not be covered by your fixed elements. It is the default behaviour of block-level elements to take all horizontal space!

Generally it is a bad idea to work with absolute units like 'px', especially when it comes to responsive layouts. And also setting heights often causes "unwanted results".

But to demonstrate that it is possible, I have set up a DEMO.

width: 100%;

This is not needed for block-level elements like div!

The demo has a real gap of 20px. If you want the elements next to each other (because of the background-color/ -image), then simply set the margin-left of #content to 228px and use padding-left: 20px;.

That's it ...!

---

Related Topics