This question already has an answer here:
not (max-width: 512px) not working
(1 answer)
Closed 6 years ago.
I use http://www.w3.org/TR/css3-mediaqueries/ to have different design depending on the available viewport.
In order for my search-and-replace to work, for every time I decide to adjust the cut-off points, I'd like to clearly negate #media (min-width: 500px), which intersects on (max-width: 500px), and, therefore, has to be manually negated as (max-width: 499px) instead, which then breaks search-and-replace.
I've tried not (min-width: 500px), but it doesn't seem to work at all. Is there a way to negate #media (min-width: 500px), such that the negative query will still have 500px in it, for my search-and-replace to work?
Try this
#media not all and (min-width: 500px) {
//selectors
}
You may also try depending upon your needs,
#media not screen and (device-width:500px)
This doesn't work
not (min-width: 500px) {}
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Related
I am really confused as to what the Media Query breakpoints should be. The way I am use to doing it is having one pixel less than the next break point, for instance
#media screen and (max-width: 749px) {} //Mobile design CSS applies to everything until 74ppx
#media screen and (min-width: 750px) and (max-width: 969px) {}
etc.
But some people use the exact values such as
#media screen and (max-width: 750px) {}
#media screen and (min-width: 750px) and (max-width: 970px) {}
Wouldn't the second approach break it? My understanding is the first approach is the way to go.
And what about if you do something such as
#media screen and (max-width: 750px) {}
#media screen and (max-width: 970px) {}
And I want all the mobile designs to apply to 750, but at 750 is where the tablet view starts. Same for 970. In this case would having it also one pixel less be correct? I.e max-width: 749 and max-width: 969
Yes, the first one is correct. In the second one, if the screens is exactly 750px wide, both media query sections will apply, which can cause problems.
Concerning your addition:
#media screen and (max-width: 750px) {}
#media screen and (max-width: 970px) {}
In this case the rules in the second query will overwrite those with identical CSS selectors in the first one, which will probably also cause problems.
The usual way would either be the other way round (desktop first approach), or using a mobile-first approach where you first state the general rules for mobile sizes, and then add media queries for larger sizes which overwrite the general rules. That would for example be
#media screen and (min-width: 720px) {}
#media screen and (min-width: 1280px) {}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
ive created three media queries on my stylesheet. the first two are alright but the last one isnt. id like to know why?
#media screen and (min-width: 50px) and (max-width: 600px){..styles..}
#media screen and (min-width: 600px) and (max-width: 800px){..styles..}
#media screen and (min-width: 800px) and (max-width: 1000px){..styles..}
I'm going to guess because your queries overlap.
should be:
#media screen and (min-width: 50px) and (max-width: 600px){..styles..}
#media screen and (min-width: 601px) and (max-width: 800px){..styles..}
#media screen and (min-width: 801px) and (max-width: 1000px){..styles..}
EDIT: Also, the first min-width:50px and last max-width:1000px are unnecessary. Unless you have a screen size smaller than 50px, which I can't imagine, or you have another query beyond 1000px.
In fact, you could remove the entire first query and just keep the second and third. It would accomplish the same thing.
I have two #media variables in my css thats cause a problem.
One is with smaller width #media only screen and (min-width: 1290px).
And the second one is with greater width #media only screen and (min-width: 1610px), allowing me to display more content.
Now, with my browser window in full screen, and a monitor resolution of 1680 x 1050 pixels, I still cannot get #media only screen and (min-width: 1610px) to appear.
Am I missing something?
Thanks.
Try setting the max-width also for your first condition, as currently both your "min-widths" will be hit when the resolution is > 1610px.
#media only screen and (max-width: 1609px) and (min-width: 1290px){
}
Basically i am trying to block some styles for a particular width range(240px to 480px). Between this range, i do not want certain styles to get rendered.
To be more clear:
I want color:#000 for all other device widths except for the width->240px to 480px. How i can i make use of media not all queries. Hope i am clear..:(
Is this the correct syntax :
I have :
#media not all and (min-width: 240px) and (max-width: 480px), not all and (min-device-width: 240px) and (max-device-width: 480px) {
What im trying :
#media not all and( (min-width: 240px and max-width: 480px )and (min-device-width: 240px and max-device-width: 480px) ){
Can i combine the two :
#media not all and (min-width: 240px and max-width: 480px) {}
#media not all and (min-device-width: 240px and max-device-width: 480px) {}
Any help is appreciated
What you originally have is the correct syntax. The others are invalid.
The not in each media query negates the media query itself, so if the browser matched a certain media query, then not means it has to ignore that #media rule. If the browser doesn't match the media query, then not means it has to apply the rule.
When you combine two or more not media queries in a single rule, at least one of them has to evaluate to true (or "not false") in order to use the rule.
If you are trying to not all the tests at once, then you need to link them all using and:
#media not all and (min-width: 240px) and (max-width: 480px) and (min-device-width: 240px) and (max-device-width: 480px)
But depending on the devices you're testing with this may or may not make sense.
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.