The @media Rule describes CSS media queries to be used to define style rules for specific device types or a wide range of screen sizes and capabilities.

Below are three of the most used media queries.

• The first example targets screens that are 767px and smaller
• The second example targets screens that are 768px or larger
• The third example targets screens between 1024px and 1439px inclusive

The rules applicable to each scenario are then written as normal, but inside the media query.

@media screen and (max-width: 767px) {
    .bar {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .foo {
        display: none;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1439px) {
    .foo {
        background-color: white;
    }
}

Using a comma between size settings acts as an “or” statement. The following will target screens that are between 1024px and 1439px (inclusive) OR screens that are 1920px or larger.

@media screen and (min-width: 768px) and (max-width: 1439px), (min-width: 1920px) {
    .foo {
        background-color: white;
    }
}

The screen orientation can also be targeted (works great for tablets to determine how it’s being held by the user).

• The first example targets screens that are wider than they are tall
• The second example targets screens that are taller than they are wide

@media screen and (orientation: landscape) {
    .foo {
        background-color: white;
    }
}

@media screen and (orientation: portrait) {
    .foo {
        background-color: white;
    }
}

Just as we can target the “screen”, we can target a device intended to print or read a document.

• The first example targets printers
• The second example targets printers where the page is taller than it is wide
• The third targets speech reading devices

@media print {
    .foo {
        background-color: white;
    }
}

@media print and (orientation: portrait) {
    .foo {
        background-color: white;
    }
}

@media speech {
    .foo {
        background-color: white;
    }
}

---