How to perform media queries if either statements are correct?

Tags: html,css,jquery-mobile,mobile

Problem :

I'm looking to find out how to perform css based on whether either one of two statements is true. For example:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (max-device-width : 1024px) 
and (orientation : portrait){


I'm making a multi-platform website and have finished the mobile version, however I want iPads to have the laptop/desktop version, all was working good with this:

@media only screen and (min-device-width: 0px){Mobile Version CSS}

@media only screen and (min-device-width: 500px){Other Version CSS}

But then I noticed after changing a mobile to landscape, it would switch back to the desktop mode, due to the width of the media query being less than the screens landscape width. What's the best set of media queries, that I can perform in two different queries, just for mobile and other platform, that take in account a phone being landscape or portrait? I don't want to have to repeat my CSS code through multiple media queries because of phones going landscape and such. I just want the mobile version to be active whether a mobile is landscape or portrait.


Solution :

That's nothing a quick google search couldn't have revealed to you: (first try)

media-query logic:

  • And: and
  • Or: ,
  • Not: not

In your case, your CSS would look like:

  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape),
  only screen and (max-device-width: 1024px) and (orientation: portrait) {
    /* your css here */

Just some reminders:

  1. Your media-query do not serve the situations "portrait and device-width < 768px" and "device-width > 1024px". You need to address those cases too somehow.
  2. While an iPad (in ladnscape) has a screen-width of 1024px, you would present your websites desktop view to any other phones/tablets having a width of at least 768px, too. I don't think that's a good idea. But I don't know what your website looks like, so I assume you know what you're doing.
  3. BTW: Wouldn't a grid-system like bootstrap do a lot for you?

    CSS Howto..

    How can I force a css flex child to be the only on its row?

    How to add animation to a bar graph with jQuery?

    How to use SVG fragment identifier for CSS background image on iOS?

    How to control the CSS on an Active/Focused button in Foundation 5 [RESOLVED]

    How can I list available Css Classes from my App_Themes folder?

    How to get a gradient background for table rows with JSF and CSS?

    Codeigniter--add “active” css class to link, how to?

    How do I get CSS table columns to line up?

    PHP: _POST and CSS, how to show an active link

    How to get an image from a css animation keyframe to remain on the page after complete [duplicate]

    How to vertically center content in before or after in CSS

    How to make one list-item in menu higher than the others with CSS?

    how to know about the font information in a psd file?

    How to achieve a left and right background split leaving middle div visible?

    On Edge Browser, how to change input placeholder text color using CSS?

    meteorjs how to import a wrapbootstrap theme

    How to make my CSS responsive

    How to add padding to anchor tags in Top Bar in Foundation 6?

    How is this put in the center using CSS?

    How to get rid of excess blank space in CSS slideshow without getting rid of manual button transition?

    How to create square image thumbnails using only CSS

    How to apply last-child only for first nested li?

    How to remove

    CSS: How to make element appear from left of the screen?

    How to write CSS for parent DIV needing height dictated by child DIVs that are also anchored bottom?

    How to set the css property of dynamic data

    How to apply different css style to gwt datagrid widget in the same page? [duplicate]

    What html or css attribute should I modify so that a mobile browser shows the website with no blank space on the right?

    How to position an image inside a DIV with dynamic height with pure CSS/HTML?

    how to show background image(multiple) if out of current div