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
Font Size Idea: px at the Root, rem for Components, em for Text Elements.
Relative units (such as rems) in media queries might not behave as you expect. The TL;DR is that 1rem in a media query condition is always equal to the font-size set in browser settings, and is not affected by a root font-size assigned in CSS.
While PX, EM, and REM are primarily used for font sizing, %, VW, and VH are mostly used for margins, padding, spacing, and widths/heights. To reiterate, VH stands for “viewport height”, which is the viewable screen's height. 100VH would represent 100% of the viewport's height, or the full height of the screen.
In addition to em and rem , a popular unit of choice for media queries is the good old pixel.
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With