Issue with min and max media queries due to using ems?
I'm working on a mobile first site. Media inquiries are set using ems as follows:
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
}
@media (min-width: 320em) {
}
@media (min-width: 600em) {
}
@media (min-width: 770em) {
}
Now I need to add a max-width media query just below the same breakpoint as my average media query so that any screen size is either one or the other.
If I was working with px it would be easy:
@media (max-width: 599px) {
}
@media (min-width: 600px) {
}
Can it be done with ems? To recap, I need any screen size to be in the min or max request. I cannot have any "any land" between me.
How can one have decimals on ems, I think the following work will not work. The screen can be 599.5 meters wide, so between two media queries.
@media (max-width: 599em) {
}
@media (min-width: 600em) {
}
source to share
I created several sites with minimum to medium width and width requests, and they found it hard to maintain for me and didn't actually add any value.
I like to use min-width queries for mobile sites because it makes sense for me to first think about my design with a minimum screen width and then slowly add or change features as the width increases. It has the added bonus of eliminating the "no land" problem. Example: (thanks @IMI for calculating the pixel width)
When you create a site like this, you end up specifying everything that changes from the previous request in each subsequent request, but the behavior is also much more predictable as your screen will either fall into one category or another. it crashes, you know exactly which properties are applied.
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
color:black;
}
@media (min-width: 20em) { /* = 320px */
body {color:red;}
}
@media (min-width: 30em) { /* = 480px */
body {color:green;}
}
@media (min-width: 37.5em) { /* = 600px */
body {color:pink;}
}
@media (min-width: 48.125em) { /* = 770px */
body {color:cyan;}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p> This is some random text.</p>
</body>
</html>
source to share
Yes, you can use decimals in your em based media queries.
The em values of the media queries will be based on the browser's "font-size" initial . This is usually 16 pixels. So you generally safely compute your em-based media queries by dividing the pixel value by 16.
Example: to get the em equivalent @media (min-width: 600px)
, you divide 600px by 16, resulting in 37.5 and a media query@media (min-width: 37.5em)
No human land:
If you need to mix min-width and max-width media queries, your best bet is to use a max-width media query equal to the min-width of your next media query, as pointed out in @maioman's answer, and that should get rid of "no human earth "gap problem. Thus, a device with a maximum of 600px will use all your styles up to max-width:37.5em
and including styles max-width:37.5em
, while devices with a higher resolution will use the following matching styles including min-width:37.5em
.
Snippet Example of em-based media queries with decimal places:
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
color:black;
}
@media (min-width: 20em) { /* = 320px */
body {color:red;} /* You wont see this color since the max-width media query is overrides it */
}
@media (max-width: 37.4375em) { /* = 599px */
body {color:green;} /* Be careful where you place the max-width media query. It will override the smaller min-width if placed after. */
}
@media (max-width: 37.5em) { /* = 600px */
body {color:green;} /* As stated in @maioman answer, using a max-width that equals the min-width of your next media query should get rid of the "no man land" problem. */
}
@media (min-width: 37.5em) { /* = 600px */
body {color:pink;}
}
@media (min-width: 48.125em) { /* = 770px */
body {color:cyan;}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p> This is some random text.</p>
</body>
</html>
source to share
as it will min-width
override max-width
, if you do something like this you should be safe:
@media screen and (max-width: 600em) {
}
@media screen and (min-width: 600em) {
}
div {
width:5em;
height:5em;
}
@media screen and (max-width: 12em) {
div {
background:green
}
}
@media screen and (min-width: 12em) {
div {
background:red
}
}
<div>test</div>
source to share
"em" is a scalable unit. Em value equal to the current value font-size
, for example, if font-size
a document 12px
, 1em
is equal 12px
. Ems are scalable in nature, so 2em
will be equal 24px
, .5em
will be equal 6px
, etc.
Size can be calculated from pixels to em using this formula: pixels / 12 (current font-size
) = em
Check out http://www.w3schools.com/css/css_font.asp
In media queries, "rem" as well as "em" do not refer to the root element (html), but directly to the browser settings, which can only be changed using the browser settings for the base font size. This means that even if you specify a font size of 30px on your html element, media queries will still use the "initial user (browser) font size" as "em" / "rem" based on media queries if you also won't change your default font size in your browser settings.
I will use (for the sake of math):
"user's initial font size" = 10px;
So let's say you have:
@media (max-width: 59em) {
}
@media (min-width: 60em) {
}
When the browser calculates em
which will be:
@media (max-width: 590px) { // 59 * 10(supposed font-size)
}
@media (min-width: 600px) { // 60 * 10(supposed font-size)
}
Here you have a range 10px
where the screen can be between two media queries.
Probably, you would say, I do a little math and solve the problem, but for math in css there is calc
like this:
@media (max-width: calc(60em - 1px);) { // 60 * 10 = 600px - 1px = 599px
}
@media (min-width: 60em) { // 60 * 10 = 600px
}
But unfortunately calc () doesn't work in media queries .
But 1px = 0.1em 1 / 10(supposed font-size)
So, you have to do the math a priori:
@media (max-width: calc(59.9em);) { // 60em - 0.1em(1px) = 59.9 * 10 = 599px
}
@media (min-width: 60em) { // 60 * 10 = 600px
}
So the only thing you need to do is change "10" to the "initial font size" of the user agent (browser) and do the a priori math.
Hope this helps you.
source to share