What is the difference between
#media all and (min-width: 500px) {
// some css
}
and
#media (min-width: 500px) {
// some css
}
Quite often I see the first declaration, but is there any benefit of including all?
There is no benefit. According to MDN:
Unless you use the not or only operators, the media type is optional
and the all type will be implied.
The all type is implied, so #media (min-width: 500px) is interpreted as #media all and (min-width: 500px) and the two statements are equivalent. The latter is just needlessly specific.
Related
I want to use AND condition in media query. I use the the following code, but it didn't works
#media screen and (max-width: 995px AND max-height: 700px) {
}
It's missing close and open parenthesis before and after the Logical Operator
#media (max-width: 995px) and (max-height: 700px) { ... }
The correct and simpliest way to write this is:
#media screen and (max-width: 995px) and (max-height: 700px) {
}
Use a comma to specify two (or more) different rules:
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
From https://developer.mozilla.org/en/CSS/Media_queries/
...In addition, you can combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the associated style sheet is applied. This is the equivalent of a logical "or" operation.
I use gulp and gulp-less to preprocess my .less files, and over time I've come up with some pretty complex structures that, while allowing me some real flexibility, also sometimes make debugging difficult.
Currently, I have the following output at the beginning of my main.css file:
#media screen and (max-width: 767px) {
}
#media (min-width: 768px) {
}
#media (min-width: 768px) {
}
#media (max-width: 767px) {
}
#media (min-width: 768px) {
}
#media (min-width: 768px) {
}
#media (max-width: 767px) {
}
#media (max-width: 767px) {
}
Since all of my media queries are defined with variables and called with a mixin, it seems like it should be pretty is easy to debug....but, there is nothing in any of my files that should produce this - at least as far as I can tell - in fact there aren't even that many candidates to parse through that could potentially produce this - so I'm a little stuck.
But really, the larger question - regardless of what's causing this - is, how to debug potentially complicated less output. Aside from sticking comments everywhere, there are no obvious tricks that I know of.
Any help?
I swear I had this working, but it's not. Is such a thing possible?
I don't want to prefix the 100's of styles with body:not(.phone)
Thank you.
#media only screen and (max-width: 768px) and (body:not(.phone)) {
}
NO. That's not how can do with #media queries. You must use like below:
#media only screen and (max-width: 768px) {/*css rules not applicable before curly brace*/
body:not(.phone){/*css rules must be within curly braces*/
color: #f00;
}
}
So, what you mean with #media queries is not possible.
#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)
{
}
Can we use the ">" or "<" symbols(Greater than and Less than ) in media queries? for example I would like to hide a dive for all monitors less than 768px. can I say some thing like this:
#media screen and (min-width<=768px) {}
Media queries don't make use of those symbols. Instead, they use the min- and max- prefixes. This is covered in the spec:
Most media features accept optional ‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to" constraints. This syntax is used to avoid "<" and ">" characters which may conflict with HTML and XML. Those media features that accept prefixes will most often be used with prefixes, but can also be used alone.
So, instead of something like (width <= 768px), you would say (max-width: 768px) instead:
#media screen and (max-width: 768px) {}
Check out the Sass lib include-media, which (despite being for Sass) explains how calls like #include media('<=768px') maps to plain CSS #media queries. In particular, see this section of the docs.
TLDR, what you learn from there is:
To do the equivalent of something like media('<=768px') (less than or equal to 768) in CSS, you need to write
#media (max-width: 768px) {}
and to do the equivalent of media('<768px') (less than 768) in CSS, you need to write
#media (max-width: 767px) {}
Notice how I subtracted 1 from 768, so that the max width is less than 768 (because we wanted to emulate the < less-than behavior which doesn't actually exist in CSS).
So to emulate something like media('>768px', '<=1024') in CSS, we would write:
#media (min-width: 769px) and (max-width: 1024px) {}
and media('>=768px', '<1024') would be
#media (min-width: 768px) and (max-width: 1023px) {}
#media screen and (max-width: 768px) { ... }
CSS Media Queries Level 4 specification comes with ">" or "<" symbols support in media queries.
So instead of:
#media screen and (max-width: 768px) { /* … */ }
You can now write:
#media screen and (width >= 768px) { /* … */ }
Check browser support here
Read more here.