Just in case you have brain farts about the logic in CSS media queries about this constantly, as I do.
If
That’s what media queries are: logical if
statements. “If” these things are true about the browser, use the CSS inside.
/* IF the viewport is 550px or smaller, do this */
@media (max-width: 550px) {
html { background: hsl(0 0% 0% / 0.5); }
}
Media Queries Level 4 allows for a comparison syntax like this, but the browser support is much lower right now:
@media (width <= 30em) {
html { background: rgb(0 0 0 / 0.5); }
}
And
The keyword and
.
/* IF the viewport is 550px or smaller, do this */
@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
The Media Queries Level 4 syntax really shines here:
@media (600px <= width <= 800px) {
html { background: red; }
}
Or
Comma separate.
@media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
Technically these are treated like two separate media queries, but that is effectively 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 a 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
.
This is future CSS stuff, but the @when
syntax will help make this better:
@when media(min-width: 600px) {
/* ... */
}
@else {
/* ... */
}
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 unintuitively.
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; }
}
Gettin Wacky
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.
This is ace, I too have the occasional brain fart about this! Thanks :D
As always a great walk-through. A brainfart post that warmed me up to media queries.
What’s the use case for
not
? Is there something you can do with@media not all and (max-width: 600px)
that you couldn’t do with@media (min-width: 801px)
?I guess maybe you need it when building up complicated queries clause by clauses, like in the last example in the article. But do you really?
Logic is a strange beast. Sometimes being specific in language about what you aren’t doing makes more sense.
I also think there might be some boolean keywords that require not to be the opposite like maybe
not (color)
– but not quite sure. I know there ismonochrome
but I’m not sure if that’s the exact opposite of color not.Gypsy: “There is perhaps one way. Have you heard of the monks of Deshuba?”
Fry: “I’ve… NOT heard of them…”
[audio src="http://www.gotfuturama.com/Multimedia/EpisodeSounds/3ACV20/24.mp3" /]
Great round-up! I have used specific heights as a way to test retina graphics before.
The first @media argument is just height (not min or max), which makes the testing a lot easier.
Many of my responsive design problems would be solved by being able to change a layout depending on the width/height of an element’s container rather than the viewport. I hope this happens one day.
You might want to look into proportional media queries.
You’re not alone, who cares about the viewport?! Anyway, here’s a start: http://blog.andyhume.net/responsive-containers/
I have been using the mobile first approach, but I hate the fact that I basically have to recreate my stylesheet for IE8 since it ignores the media queries. Anyone have any tips for improving that workflow?
Actually yes, do it in the reverse. In your main workflow assume you are designing for a non media query site (eg: desktop, IE8) then only use Media Queries where you need to, and keep them at the bottom of your style sheet. It’s not exactly mobile first design, but I have found it very easy to use by only amending exactly what needs to change for specific device, width etc… At the very least it stops you duplicating all of your code in each media query, by assuming the worst scenario (IE7,IE8) and then applying progressive improvements, tweaks to suit.
@Stephen Surely the Mobile First approach is more about the order in which you create the media queries (smaller viewports –> larger viewports) than where the actual queries are found in the document?
Whenever I’m doing responsive work I always put everything in one lock at the bottom of the stylesheet, rather than having each one adjacent to the relevant selector etc.
I use conditional comments on the HTML element and then use LESS to contain all my media queries and then also feed them to IE7 and IE8.
This way I only have to write the media queries once and IE still gets a decent desktop experience.
I guess it would probably also be more efficient to have a separate stylesheet which then just gets conditionally included for IE to save stop the duplication in the main CSS file but this is the theory.
Please check out CSS Media Query Live Demo and Cheat Sheet.
Hope it’s helpful for the developers and designers.
https://github.com/AndreLion/mediaquery
Nice article! I really would like to get a tutorial about common CSS media queries that support the majority of mobile devices out there, meaning small/large smartphones, tablets, different viewport orientations etc… I don’t want to support each device viewport, but the the most common… Any suggestions?
Great article chris, simple and straightforward!
Really appreciate this, especially going over ‘not’.
Thanks for this concise clarity in the media query mayhem. Exclusive and Overriding examples hit the spot!
Once again, you prove why devs flock to you when it comes to CSS. You simplify things very nicely.
I would love some info in how printers respond to media queries. What’s a printers “min-width”?!
Hi there,
I am using media query for a responsive web. I used top down approach from desktop to smaller devices, but when it comes to test in android devices that is really pain. For example an android device with resolution 800×480 get conflict with iPad resolution 768×1024.
I have tried “min-device-width” to “max-device width” for both but then also result same.
What can be the solution for this kind of situation? Help….
The solution is, generally speaking, mobile-first styling. By doing things mobile-first, your focus is more around the content, and adding styles as capability (and size) allows, instead of trying to strip away things when the viewport becomes too small.
Proportional media queries can also help, because they no longer care about pixel dimensions (which helps for edge cases such as the Kindle Fire or a projector).
Hey Vipul,
Can you guide me in how you went about changing the stylesheet to incorporate the media query changes for responsive web design.
Any help will be appreciated
Hello Sach,
Try like this,
Thanks for explaining it so I can finally understand
here is 2 links that could be very useful:
http://www.mobitest.me/ tells about the screen and features supported .
http://www.mobitest.me/devices/ a listing of common mobile values
ur links not working
I suppose it all depends on the contraints of the project as to which of the approaches you covered as to which is the most sufficient and code efficient approach.
@media not, (max-width: 600px) {
html { background: red; }
}
Adding the comma seems to work for me in the not media query.
@media (min-width: 801px) and (max-width: 1365px){
/* style goes here */
}
I m using this media query. this is not working up to max-width:1365px. it works till 1224px only.
help me!!!
Are you sure you aren’t overriding it with some other query?
A side note to everybody, be careful if you use some online CSS minifiers, because some of them destroy the @media code :)
ya i am sure it is not overriding with some other media queries.
how to use max or min-height with media queries any example and what’s the d/f b/w @media(max-width:etc)
and @media screen and(max-width:etc)
and @media all ?
I am using media query for a responsive web, commonly we are using media queries like this:
@media (min-width: 1024px) and (max-width: 1280px){
/* style goes here */
}
It’s fine….
My Question is this, If we have to control the height through media query then what to do.
As you guys know some users using 1280-768 resolutions and some are using 1280-960/1024 some are using hire resolutions. We developers are stuck on this occasions. I need help and want the solution from you guys….
Hi there. I’m ‘stacking’ some media queries for retina and also mon-width as so:
My problem is that the last Media Query is overriding everything. I can’t seem to figure out why. I would have thought that it’s predecessor would override it if the width matched.
Any one know why?
Cheers
I haven’t tried it, but you can’t start something with not. Afaik, the “not” logic is to subsctract elements from an initial group. So you should start with the rest, and then add the not substraction. Your hacks are probably working because you are forcing for a whole group to be defined (other than where the not is) to have something to substract from.
I just would like to have…
:-)
I don’t see how these override each other, can someone explain please?
Best,
Karl
All above 3 styles are in my website How can I make only 2 of them for desktop can load
same way in mobile i need call one style
via email from Arkadiusz Czekajski: