Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using em instead of px #4

Open
nhoizey opened this issue Sep 18, 2013 · 16 comments
Open

Using em instead of px #4

nhoizey opened this issue Sep 18, 2013 · 16 comments

Comments

@nhoizey
Copy link

nhoizey commented Sep 18, 2013

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
Copy link

badeend commented Sep 19, 2013

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

@nhoizey
Copy link
Author

nhoizey commented Sep 19, 2013

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

@badeend
Copy link

badeend commented Sep 19, 2013

The width could be calculated like this:

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

@DavidOliver
Copy link

+1 for addition of ems.

@kumailht
Copy link
Owner

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

@badeend
Copy link

badeend commented Sep 20, 2013

@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
Copy link
Owner

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
Copy link

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
Copy link
Author

nhoizey commented Sep 23, 2013

+1 with @DavidOliver

@josephspens
Copy link

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
Copy link
Author

nhoizey commented Oct 24, 2013

@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
Copy link

@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
Copy link

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
Copy link
Author

nhoizey commented Oct 24, 2013

@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
Copy link

@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
Copy link
Author

nhoizey commented Oct 24, 2013

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants