I have a situation that would easily be solved if I could write a CSS media query containing a logical OR. Since I can't, I'm looking for the most efficient alternative.
GOALS: 1) Create a minimalist, but responsive, page 2) use HTML & CSS only 3) keep all CSS within the section instead of external files 4) minimize repeated code
#media (orientation: landscape) {...}
#media (orientation: portrait) {...}
#media (width: *tiny screen*) {...}
#media (width: *small screen*) {...}
#media (width: *medium screen*) {...}
#media (width: *large screen*) {...}
The above works well so far, in that any situation should trigger one set of orientation-based rules and one set of size-based rules.
The sticking point is that I want "tiny" screens to use the portrait rules even if they are landscape.
#media (orientation: portrait) OR (width: *tiny*) {...}
#media (orientation: landscape) {...}
#media width: *small screen* {...}
#media width: *medium screen* {...}
#media width: *large screen* {...}
Without being able to OR the two conditions in one query, any solution I've come up with requires either repeating the entire set of portrait rules under the "tiny" style OR using external style sheets which I'm trying to avoid.
Anyone have a better idea?
you CAN write OR in mediaqueries. just write is as if is was a css-selector and use a comma "," :)
#media (orientation: portrait) OR (width: *tiny*) {...}
does not work, but
#media (orientation: portrait), (width: *tiny*) {...}
does
edit: see CSS media queries: max-width OR max-height
Related
I see some people declaring for example #media (min-width: 1200px) and other people declaring #media (max-width: 1200px).
Do we need to declare both? If not what's the correct way to choose from the two?
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) {}
I have the following media query for a mobile app,
only screen and (max-height: 630px) and (orientation: portrait) {}
What I want is for the styles inside this media query to apply to all screens which has a height of 630px or less. Basically it should apply for smaller screens. On the browser this works great. But on actual devices, it doesn't work properly.
Devices which are larger than 630px still applies the styles inside that media query. I managed to fix it for some screens by adding the pixel ratio -
only screen and (max-height: 630px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {}
Still on some larger screens (even new phones) the styles are getting applied. What am I doing wrong here.
Try using device-height
#media only screen
and (max-device-height: 630px)
and (orientation: portrait) {
/* Code */
}
A good article about media query https://blog.box.com/blog/media-queries-things-i-wish-id-known/
Try this.
#media screen and (max-height: 630px){
//Write your mobile styles here
}
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.