Combining CSS Media Queries

How do I combine two media queries?

Not fully clear what you want to combine, but basically you separate them with a comma

eg

@media only screen and (orientation : landscape) , only screen and (min-device-width : 481px) and (orientation : portrait) { ...

Combine media queries

Use a comma to combine multiple media queries into a single rule.

Here is MDN's definition of the , (comma) in media queries:

Commas are used to combine multiple media queries into a single rule.
Each query in a comma-separated list is treated separately from the others.
Thus, if any of the queries in a list is true, the entire media statement
returns true.
In other words, lists behave like a logical or operator.

For example

@media screen and (max-width: 375px)
  , screen and (max-width: 414px)
{
   /* some css here */
}

Also, device-width/device-height are deprecated. Consider using width/height instead, as seen in the example above.

Can I combine CSS media queries with CSS selectors?

I've now played about with this a bit more and come up with a solution that doesn't duplicate the code in the same way:

.article-sidebar, .article-sidebar-bottom {
    text-align: left;
    padding-top: 46px;
    border-top: 1px solid #eeeeee;
    padding-left: 5%;
    padding-right: 5%;
}

@media (min-width: 992px) {
    .article-sidebar {
        float: right;
        max-width: 28%;
        border-top: initial;
        padding-left: initial;
        padding-right: initial;
    }
}

I think my problem was that I was thinking 'top down', i.e. starting with large screens and then adding support for smaller devices in the media query. If it's the larger screens that are handled by the media query then I think it becomes much neater.

Thanks to everyone who's commented so far. Although I've found a better solution to my own problem I'd still be interested in an answer to the original phrasing of the question... i.e. whether anyone can provide the syntax to use the same style for different combinations of class & media query (if this syntax exists...)

Is it possible to combine media queries for same CSS rules?

You don't have to add @media again in the second line. This should work:

@media screen and (min-width: 768px) and (max-width: 990px),
screen and (max-width: 630px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

Combining CSS media queries

Separate them with a comma:

@media only print, only screen and (max-device-width: 480px)

See the spec, in particular, example VI (emphasis added):

Several media queries can be combined in a media query list. A
comma-separated list of media queries. If one or more of the media
queries in the comma-separated list are true, the whole list is true,
and otherwise false. In the media queries syntax, the comma expresses
a logical OR, while the ‘and’ keyword expresses a logical AND.

I doubt that the second only is needed, so you can probably do:

@media only print, screen and (max-device-width: 480px)

Mixing an @supports with an @media query in CSS

There isn't a way to combine two different conditional at-rules into one with OR logic (AND logic, as you've stated, can be done by nesting, even though strictly speaking they're still two separate rules). Unless you have plumbing that can automatically duplicate your CSS across two separate conditional rules for you, you will have to do that manually.

If possible, consider approaching this from a progressive-enhancement point of view rather than a graceful-degradation one. That is, rather than applying fallback styles to browsers that either don't support grid or are displaying on smaller screens, apply grid styles to browsers that support grid and are displaying on larger screens — this is where the nesting of rules you mention then makes sense:

@supports (display: grid) {
    /* Or screen and (min-width: 701px),
       or not screen and (max-width: 700px),
       depending on your needs and preferences */
    @media screen and (min-width: 700px) {
        /* Grid styles */
    }
}

If you're not a fan of the extra indentation, you can reduce it somewhat, or just not indent at all ;)

MUI JSS combine media queries without repetition

The first thing to realize is that the theme.breakpoints methods don't do anything magical -- they are just convenience methods for producing media query strings.

For instance theme.breakpoints.down('xs') (when using the default breakpoint values) evaluates to @media (max-width:599.95px) and theme.breakpoints.only('md') evaluates to @media (min-width:960px) and (max-width:1279.95px). You can find the Material-UI code within the createBreakpoints function.

The next step is being aware of the syntax for achieving your objective within CSS (and JSS). Commas can be used to do an "or" of multiple media query conditions, so the string you want to produce for the example in your question would be as follows:

@media (max-width:599.95px), (min-width:960px) and (max-width:1279.95px), (min-width:1920px)

To avoid hard-coding the breakpoint values, you can produce the above string by stringing together (with commas) the desired function calls and getting rid of the extraneous cases of @media since that should only occur once at the beginning.

Here's a working example:

import React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  button: {
    color: "white",
    backgroundColor: "purple",
    [`${theme.breakpoints.down("xs")},${theme.breakpoints
      .only("md")
      .replace("@media", "")},${theme.breakpoints
      .up("xl")
      .replace("@media", "")}`]: {
      color: "red",
      backgroundColor: "green",
      border: "1px solid blue",
      fontSize: 17,
      marginTop: 3,
      padding: 7,
      display: "flex",
      flexDirecton: "column"
    }
  }
}));
export default function App() {
  const classes = useStyles();
  return (
    <Button className={classes.button} variant="contained">
      Hello World!
    </Button>
  );
}

Related answer: How can I use CSS @media for responsive with makeStyles on Reactjs Material UI?

---

Related Topics