Im working on a mobile first site. The media queries are set with ems like so:
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) {
}
I now need to add a max-width media query just below the same breakpoint as my middle media query, so that any screen size is either one or the other.
If I was working with px this would be easy:
#media (max-width: 599px) {
}
#media (min-width: 600px) {
}
Can the same be done with ems? Just to reiterate, I need it so any screen size will be in either the min or max media query. I cant have any 'no mans land' in between.
As its possible to have decimal places on ems I think the following wont work. A screen could be 599.5ems wide as so be in between the 2 media queries.
#media (max-width: 599em) {
}
#media (min-width: 600em) {
}
I've built a few sites with both min and max width media queries, and for me they've been painfully difficult to maintain and didn't actually add any value.
I like to use min-width queries for mobile-first sites, because it makes sense to me to think about my design from my smallest screen width first and then slowly add or change features as the width increases. This has the added bonus of eliminating the "no man's land" issue. See example: (thanks #IMI for calculating the pixel widths)
When you build a site like this, you end up specifying everything that changes from the previous query in each subsequent query, but behavior is also much more predictable as your screen will either fall into one category or the other, and whichever one it falls in, you know exactly what properties are being 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>
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 "initial" font-size value. This is typically 16px. So you are usually safe calculating your em based media queries by dividing the pixel value by 16.
Example: to get the em equivalent of #media (min-width: 600px) you would divide 600px by 16 which would result in 37.5 and a media query of #media (min-width: 37.5em)
No Man's Land:
If you have to mix min-width and max-width media queries it is best to use a max-width media query that equals the min-width of your next media query as stated in #maioman's answer and that should get rid of the "no man's land" gap problem. That way, a device with a max of 600px will use all your styles up to and including the max-width:37.5em styles while devices with have a higher resolution will use the following relevant styles including the min-width:37.5em.
Snippet Example of em based media queries with decimals:
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's answer, using a max-width that equals the min-width of your next media query should get rid of the "no man's 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>
since min-width will 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>
fiddle
The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12px, 1em is equal to 12px. Ems are scalable in nature, so 2em would equal 24px, .5em would equal 6px, etc.
The 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” don’t refer to the root element (html) but to the browser defaults directly which can only be changed using the browser settings for base font size. This means that even if you specify a font size of 30px on your html element, media queries will still use "user agent's (browser's) initial font-size" as “em” / “rem” based for the media queries unless you also change your default font size in the browser settings.
I will use(for the good of math):
"user agent's initial font-size" = 10px;
So let say you have:
#media (max-width: 59em) {
}
#media (min-width: 60em) {
}
When the browser compute the em that will be equal to:
#media (max-width: 590px) { // 59 * 10(supposed font-size)
}
#media (min-width: 600px) { // 60 * 10(supposed font-size)
}
Here you have a range of 10px where the screen could between the 2 media queries.
Probably you would say, I do a little math and solve the problem but to do 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() not working within 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 that you have to do is change the "10" to the "user agent's (browser's) initial font-size" and do the math a priori.
I hope this help you.
Related
I was curious what was going wrong here with my media queries. I just want one style for 'reasonably small screens' and one style for 'reasonably large screens'. So I did the following:
#media (min-width: 501px) {
#courtName {
font-size: 17px;
}
#courtInfoWindow {
font-size: 13px;
}
}
#media (max-width:500px) {
#courtName {
font-size: 64px;
}
#courtInfoWindow {
font-size: 40px;
}
}
I would expect the min width size to show on 'large screens' and the max width size to show on small screens (less than 500px). Yet, the smaller size is shown on all screen sizes. I've tried using just one media query to override a default size. Tried switching the order. Nothing is working. What gives?
before starting make sure you have following view port meta in your head section.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
After this
please note following
#media (min-width: 501px) { /** CSS HERE **/ }
This will work only on screen size larger than 501 pixels wide.
#media (max-width: 500px)
This will work only on screen sizes smaller than 500 pixels wide.
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width : 1224px) {}
I am using these mediaqueries and these are working fine but when I see my website at 1280px resolution, it does not work
Try like this:
#media screen and (min-width: 1024px) and and (max-width:1280px)
{
.....
}
#HMS Designz, If you want to access media query 1280 to 1024 resolution. You can try like this.
#media screen and (min-width:1024px) and (max-width:1280px) {}
#media all and (min-width: 1280px) {
/* css for width greater than 1280px */
}
#media all and (max-width: 1280px) and (min-width: 1024px) {
/* css for width between 1280px and 1024px */
}
#media all and (max-width: 1023px) {
/* css for width less than 1024px */
}
Here is detailed explainition of media queries.
include this in <head></head> (if you have not)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
If
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
The keyword and.
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate.
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
Technically these are treated like to separate media queries, but that is effectively and or.
Not
Reverse the logic with the keyword not.
#media not all and (max-width: 600px) {
html { background: red; }
}
Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y
Exclusive
To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.
#media (max-width: 400px) {
html { background: red; }
}
#media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
#media (min-width: 801px) {
html { background: blue; }
}
Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.
Overriding
There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.
#media (min-width: 400px) {
html { background: red; }
}
#media (min-width: 600px) {
html { background: green; }
}
#media (min-width: 800px) {
html { background: blue; }
}
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.
Mobile First
Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.
html { background: red; }
#media (min-width: 600px) {
html { background: green; }
}
Desktop First
Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.
html { background: red; }
#media (max-width: 600px) {
html { background: green; }
}
You can be as complex as you want with this.
#media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.
And for media queries priorites
sources : one two three four five
You are not create any media query for 1280 px resolutions. First create media query for that resolution using following media query.
#media screen and (min-width:1024) and (max-width:1280px)
{
}
Bootstrap includes some default media queries that look like this:
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
Why don't these include the max-width variable? Is that inherently implied by just using min-width, i.e. does CSS just simply "know" to take the highest min-width possible?
It has to do with logic.
TL;DR: See it as if/else statements in you code. You only add the max if you want a max specified.
You can read it like this:
#Div{ color: green; }
#media (min-width: 992px) {
#Div{ background: pink; }
}
This reads:
Make font->green, and also
if( min-screen-width at least 992px ) BG -> pink
If you would have maxwidth it goes with the same logic, only as maximum.
If you have both:
#Div{ color: green; }
#media (min-width: 500px) and (max-width: 992px){
#Div{ background: pink; }
}
This reads:
Make font->green, and also
if( min-screen-width atleast 500px AND a maximum of 992px ) BG -> pink
Easy demo for max-width, make something tablet resolution only (asuming everything 1024+ is desktop):
#media (min-width: 1024px) { /* ... */ }
There is a tendency to design for the smaller screen (ie. mobile) first and use media queries to target larger screens (ie. desktop) users. This is what you are seeing in the Bootstrap CSS.
The main stylesheet applies to the mobile browser (in fact all browsers). Then a media query is used to target slightly larger screens to apply specific rules:
#media (min-width: 992px) {
This targets window sizes greater than (or equal to) 992px (ie. whose minimum width is 992px).
There is no max-width specified here, so this applies to all large windows.
I've seen various media queries designed to determinate the layout, but lately i been seeing people find the screen size using em.
Is this better, and why?
Use em to make scalable style sheets. em is a relative measurement of your browser same as percentage unit.
Example
body {
font-size: 81.25%;
}
#media screen and (min-width: 68em) and (min-height: 53em) {
body {
font-size: 87.5%;
}
}
#media screen and (min-width: 75em) and (min-height: 57em) {
body {
font-size: 93.75%;
}
}
#media screen and (min-width: 80em) and (min-height: 62em) {
body {
font-size: 100%;
}
}
EM units and then changing body’s font-size when viewport height grows above certain point. you read this to clear idea how em does work. hope this help you!
I have a problem with a media query in 320px width.. in my general css for standard web resolutions I have this:
body {
background-image:url(../Images/FondoSL.png);
font-family: 'Open Sans', sans-serif;
font-size:1em;
}
.headerPartOne p{
font-size:0.94em;
color:#676767;
margin-left:30px;
margin-top:5px;
margin-bottom:0;
}
.contentContentPage fieldset ul li span {
font-style:italic;
font-size:0.98em;
margin-left:35px;
}
and in the media query 320px this:
#media only screen and (min-width: 320px) {
body {
font-size:0.7em;
}
.headerPartOne p{
font-size:0.74em;
color:#676767;
}
.contentContentPage fieldset ul li span {
font-style:italic;
font-size:0.48em;
}
}
also i have another media query for web and mobile screen resolutions
#media only screen and (min-width: 600px) and (max-width: 800px)
#media only screen and (min-width: 533px) and (max-width: 853px)
#media only screen and (min-width:1920px)
these media queries work fine.
well my problem is that the query 320px's style is applied to all resolutions, this means that if I run a query to a larger average resolution keeps the styles in 320px media query .. why is this? with other query I do not feel the same, each applies the style I want. (if I not put the 320px media query)
sorry for my english.. thanks
Lets take this one css rule as an example.
Lets remember, that CSS stands for Cascading Style Sheets. So the rules at the bottom of the sheet overwrite any rules that came before it.
So if you have
body {
font-size: 1em;
}
on line 25 of your css style sheet.
and have
#media only screen and (min-width: 320px) {
body {
font-size:0.7em;
}
}
on line 114 of your css style sheet.
The font-size will be 0.7em, since it overwrote the previous style.
Lets say instead of that #media query you did this instead
#media only screen and (max-width: 320px) { /* notice the max-width instead of min-width */
body {
font-size:0.7em;
}
}
The font-size will then appear as 1em on regular screens, (any screen above 320px).
This will apply to styles below 320px
#media (max-width:320px) {
/* styles here */
}
(min-width: 320px) means every resolution greater than 320px in width.
If you want only screens of 320px or less to receive these rules, you need to use (max-width: SIZE) where SIZE is whatever the biggest screen is you want it to be applied to.