Using em instead of px

[nhoizey]

This is a great project, we indeed need elements based Responsive Design, but it would IMHO be better with em units.

Here's why: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

[badeend]

I wouldn't remove px in favor of em, but keep them both. Like .gt300px and .gt300em and possibly .gt300pct (percent).

[nhoizey]

@davebakker would be even better, of course! ;-)

[badeend]

The width could be calculated like this:

function getElementWidthInEm(jqueryElement) {
    return jqueryElement.width() / parseFloat( jqueryElement.css("font-size") );
}

[DavidOliver]

+1 for addition of ems.

[kumailht]

EMS, like percentages are relative. What would these EMS be relative to?

[badeend]

@kumailht Relative to the targeted element? (In case of em's)
In case of a percentage, relative to the first parent with an absolute position.

[kumailht]

The only reason to use responsive elements is so your elements can adapt to its parent. I don't see how EMs or percentages could even work. Maybe I'm missing something here but I am having a hard time visualizing a real world use case.

[DavidOliver]

The only reason to use responsive elements is so your elements can adapt to its parent. I don't see how EMs or percentages could even work. Maybe I'm missing something here but I am having a hard time visualizing a real world use case.

When the parent element is assigned a percentage width (as opposed to a px or em width), we may not know what it's actual width will be. If we already use ems for our standard media queries, being able to use ems for the "element media query" would be a more natural fit. Plus the parent's ems value takes into account the user's browser's text-zoom setting.

I haven't used "element media queries" before, so I haven't followed this through and tested, but as far as I can think using ems would be practical in the same way that using them for standard media queries would be.

[nhoizey]

+1 with @DavidOliver

[josephspens]

Start using rem, it behaves the same as em except it is relative to the document root instead of the parent.

So define a base font size on the body as 16px or whatever, then all rem units on the size are relative to that 16px. Change the font size for smaller screens and everything scales perfectly.

[nhoizey]

@josephspens rem put more constraints than em.

To quote @simurai 's great Sizing (Web) components post:

[with rem] you can scale everything up/down by just changing the root font-size. But there is the problem: It scales everything. If you want finer control, you’re out of luck. By using [em] font-size on a per component level it allows you to size them all individually.

Considering we're talking here about responsive elements, using units that let us change elements individualy seems the way to go.

[josephspens]

@nhoizey I'm not sure I follow... by changing the root font-size everything on the site will scale regardless of using em vs rem. The difference is your components won't be scaling the way you want them to.

Let's say you want to scale the entire site x2, with rem all you need to do is double the root font-size and everything scales as you would expect. With em, your components are most likely going to scale greater than x2, because their parents have a font-size of 1.2em, which is nested in a wrapper of 1.4em, and so on. Just using that example, your component is already 136% larger than you intended.

What finer control do you want? If you want to only scale the component, change the component's root font-size from 1rem to 1.2rem, an so on.

[josephspens]

I think we misunderstood each other, what I was advocating for was setting a component's root font-size using rem, but it's sub components must be em so the entire component scales as one. I just don't like using em for the component's root font-size because you lose control once you add it to the page, depending on where you put it.

For example:

.Component {
  font-size: 1rem;
  .Component-title {
    font-size: 1.6em;
  }
  .Component-text {
    font-size: 1.2em;
  }
}

[nhoizey]

@josephspens OK, I know understand… ;-) I thought you wanted to put rem units everywhere.

You just have to chose very carefully the elements on which you use rem. Then, it is true you can "move" your components anywhere in the document and they will keep their sizes. If that's what you want — seems the most frequent use — that's perfect.

However, when using rem you have to also use px fallbacks, whereas em works everywhere… ;-)

[josephspens]

@nhoizey Ah, I see what you mean! rem is unavailable to legacy IE... so can we agree rem as the root font size of a component is the way to go once we stop supporting IE8?

[nhoizey]

@josephspens I agree for most projects, yes. Some may still require components that scale depending on their parents, but I think it's not the most frequent use.