Media queries PX vs EM vs REM

问题

Can anyone explain why my media queries break when converting them FROM px TO ems

In the body of my document, I have included the following rule font-size: 62.5%, Therefore I would assume that I could convert my media query to FROM 650px to 65em? Changing my media queries to ems breaks the layout

As an alternative, can I convert the media query to REMS with a pixel fallback ?? that said, I have no idea how to do this

@media screen and (min-width: 650px) { 

body 
{
font-size: 62%;
background-color: #364759;
background-repeat: repeat-x;
background: url("bg.gif");
}

#wrapper, 
footer
{
width: 80%;
max-width: 1050px;
margin: 0 auto;
}
} // end media query

many thanks, P

回答1:

Section 1.3 of the media queries spec says:

Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the em unit is relative to the initial value of font-size, defined by the user agent or the user’s preferences, not any styling on the page.

Similarly, the section 2 says:

Unless another feature explicitly specifies that it affects the resolution of Media Queries, it is never necessary to apply a style sheet in order to evaluate expressions.

So your font-size: 62.5% rule has no effect with regards to media queries, and 1em is still 16px, not 10px.

The reason things are this way is that doing otherwise would cause loops, which is something CSS cannot deal with. Try to think of what this example would do if we didn't have this rule:

body { font-size: 10000px; }
@media (min-width: 1em) {
  body { font-size: 1px; }
}

1em would be gigantic, so the media query would match, so 1em would be small, so the media query wouldn't match, so 1em would be gigantic, so...

回答2:

Here is a great article that will help explain the differences between px/em/rem

https://www.futurehosting.com/blog/web-design-basics-rem-vs-em-vs-px-sizing-elements-in-css/

Also this may be useful: https://css-tricks.com/rems-ems/

EDIT

As @Jesse Kernaghan commented that the above links could be broken easily I will outline. The differences between PX vs EM vs REM.

A pixel is an absolute measurement, which means that they are the same size regardless of the size of anything else. In practice, they are not the same length everywhere because specific devices treat them differently, however on each device a pixel is always the same. 16px on your laptop monitor is not the same as 16px on your iPad. Pixels are absolute but not consistent.

Where px is an absolute measure of length em's are relative to the font-size of the parent element. Take the following example:

div{ font-size: 22px; }
p{ width: 200em; margin: 3em; font-size: 0.8em;}

<div>
    <p>Some text</p>
</div>

Now if you wanted to half the size of the p element you would just need to change the font-size of the surrounding <div> to 11px.

This unit of measure can be very useful as it pertain's to responsive layouts.

However, there are problems with em's. Because everything is sized relative to it parent, the meaning of an em changes as elements are nested. If you take the above example and expand on it and nest a <blockquote> inside the <p> with a font-size of 0.5em, the result will probably not be what is expected. The result will be that the font-size of the <p> will be equal to 11px however the font-size of the <blockquote> will be half of that again, because em is relative to the immediate ancestor (<p>), not the <div>.

rem

Rems (root ems), are like em's but they are always relative to the font-size of the <html> element. It does not matter how deeply nested an element is.

Conclusion

So with a brief explanation out of the way there is a basic concept that Chris Coyier has in his post https://css-tricks.com/rems-ems/. It basically outlines to set a base html font-size and then do media query adjustments using px (remember this is an absolute measurement). And inside these media query resize all you do is scale the font-size down. Then you set your main elements using the rem and the elements that need to scale with the main elements use the em. Chris Coyier code example is below:

/* Document level adjustments */
html {
  font-size: 17px;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* Modules will scale with document */
.header {
  font-size: 1.5rem;
}
.footer {
  font-size: 0.75rem;
}
.sidebar {
  font-size: 0.85rem;
}

/* Type will scale with modules */
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}

回答3:

In addition to the other answers, please note that a length specified in em for another property than font-size is actually relative to the font-size of the element itself, i.e. not necessarily its parent. This makes a difference if you specify a padding, margin etc in em and also a font-size for one and the same element.

来源：https://stackoverflow.com/questions/29686099/media-queries-px-vs-em-vs-rem

标签

html5

css3

media-queries

ssas