0

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?

GKanes
  • 143
  • 1
  • 4
  • Goals, #3, dropped the word, HEAD. keep all CSS within the head section, as opposed to linking to external .css files. – GKanes Oct 25 '14 at 13:48
  • You can have same styles for landscape and portrait for as you call them "tiny" :D And basically media queries depend on your design and how you want to break the design on different devices :) – Bojan Petkovski Oct 25 '14 at 13:53
  • keeping all style in the head for: single file site, minimize server requests, KISS, to see if I can, etc. – GKanes Oct 25 '14 at 13:56
  • It's going to be very difficult to give a decent answer to this because the question is so broad--some specifics, i.e. elements that are going to be following different rules according to the screen size, would make it easier to help. – i alarmed alien Oct 25 '14 at 13:59
  • trying to figure a way around repeating the entire (long) list of portrait rules under two separate queries. maybe I'm just being dense from over-thinking this. If I say (orientation: landscape) AND (min-width: *small screen*) {do this} and I say (orientation: portrait) {do this}, how do I cover landscaped screens that fall into my *tiny* range (which would fail both the above tests) without repeating the Portrait rules? – GKanes Oct 25 '14 at 14:07
  • the orientation sections specify layout, this div here, that one there... the size sections specify the font details. I made the question deliberately broad because I thought the details muddied it. Regardless of what rules I invoke, I'm questioning how to phrase/order/combine the queries to minimize repeated code. The best I've figured yet still calls for me to repeat the Portrait rules under two queries. – GKanes Oct 25 '14 at 14:18

1 Answers1

3

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

Community
  • 1
  • 1
David H.
  • 131
  • 3