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 make a fixed position centered after zooming the whole website out?

    How come bootstrap.min.css looks like commented

    How is CSS/HTML Rendered In Browsers?

    How do I use pseudo-selectors to change a “Home” button to an icon using just CSS?

    How is the force reload of javascript/css done in Symfony?

    How to add code into a page with a lot of conflicting CSS, without using Scoped CSS?

    How to align buttons arround a circle image

    How to extend a wrapped element background both left and right with different color?

    How to define `autocomplete=“off”` as a CSS style?

    How to add another line on overflow in a text input?

    CSS how to have two divs to the right of one div but not beside each other

    CSS: Is there a limit on how many classes an HTML element can have?

    What is the purpose of this csslint error and how can I get rid of it?

    CSS: how to make a horizontal images scroller with two images per column?

    How to make an element slide with the viewport as it scrolls?

    Transition animation to show hidden content

    How to make a navbar stay in one line?

    HTML: How to change the width of input field based on container size

    How to set background-color to the length of the test in a jQuery UI accordion?

    How can I make a border wrap around a group of pictures?

    How to change the content value of iconmoon font?

    ASP.Net MVC: How can I easily change the tab color of my navigation menu based on the tab that I'm on?

    CSS: how do I force contents in a table cell to stay on one line when browser size reduced

    How can I get horizontal overflows to work in CSS?

    How to apply CSS style to a Sibling Label field of a Div?

    How to add font to web application .css file

    How to create a vertical linear gradient for a GTK separator

    CSS: how to apply styles to the last of a CSS class (not the last of )

    how to move css element with scrolling left with Jquery?

    How to create a clickable block?