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)
OR
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.

Thanks



Solution :

That's nothing a quick google search couldn't have revealed to you: (first try) https://css-tricks.com/logic-in-media-queries/

media-query logic:

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


In your case, your CSS would look like:

@media
  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 to animate CSS Translate

    how to use static folder in django for css and javascript?

    Dynamically loaded thumbnail image shows other thumbnails full size image instead of its own (using javascript hover over effect)

    Grunt: how to concat a .CSS file onto my compiled .SCSS files?

    CSS: how to make children fit parent's width

    Any ideas how to replicate this inline dropdown menu using css/jquery

    How to resize QR code?

    How to Change Error Message Css Style (Parsley)

    How to break a line after some certain width in css

    How can we retrive style from css by selector without creating element?

    How to hide the div on click through animation css

    CSS column-count and Chrome bug: how to avoid overflow content being cropped

    Chrome inspector not showing body outline correctly

    How to override Liferay core' css?

    How to Set Banner-Like Background Image With CSS

    How can I create this simple form example in HTML?

    How to wrap entire line with overline and underline , until the end of the line ?

    CSS Select element, how to disappear the arrow?

    How to scroll a fixed div when I resize the browser window

    How to align text next to a “div” in HTML/CSS?

    How do I animate an entire table row in Angular without affecting the table row border?

    How to make link change the css in the following page [closed]

    How could I make a menu dropdown on click

    How to remove whitespace that appears after relative positioning an element with CSS

    How to align arrows using CSS or jQuery or JavaScript [closed]

    how to use two css style in a div or span

    How to remove default chrome style for select Input?

    CSS: How to achieve - Two elements to be centered and positioned side by side WITHOUT a third parent container?

    How do I get a div to fill the width regardless if the brower window is shrunk?

    how to put 2 triangle in together css