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;
    }
}

Value	Description
all	Used for all media type devices
print	Used for printers
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that read the page out loud to the user

Value	Description
any-hover	Does any available input mechanism allow the user to hover over elements?
any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it?
aspect-ratio	The ratio between the width and the height of the viewport
color	The number of bits per color component for the output device
color-gamut	The approximate range of colors that are supported by the user agent and output device
color-index	The number of colors the device can display
grid	Whether the device is a grid or bitmap
height	The viewport height
hover	Does the primary input mechanism allow the user to hover over elements?
inverted-colors	Is the browser or underlying OS inverting colors?
light-level	Current ambient light level
max-aspect-ratio	The maximum ratio between the width and the height of the display area
max-color	The maximum number of bits per color component for the output device
max-color-index	The maximum number of colors the device can display
max-height	The maximum height of the display area, such as a browser window
max-monochrome	The maximum number of bits per "color" on a monochrome (grayscale) device
max-resolution	The maximum resolution of the device, using dpi or dpcm
max-width	The maximum width of the display area, such as a browser window
min-aspect-ratio	The minimum ratio between the width and the height of the display area
min-color	The minimum number of bits per color component for the output device
min-color-index	The minimum number of colors the device can display
min-height	The minimum height of the display area, such as a browser window
min-monochrome	The minimum number of bits per "color" on a monochrome (grayscale) device
min-resolution	The minimum resolution of the device, using dpi or dpcm
min-width	The minimum width of the display area, such as a browser window
monochrome	The number of bits per "color" on a monochrome (grayscale) device
orientation	The orientation of the viewport (landscape or portrait mode)
overflow-block	How does the output device handle content that overflows the viewport along the block axis
overflow-inline	Can content that overflows the viewport along the inline axis be scrolled
pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it?
resolution	The resolution of the output device, using dpi or dpcm
scan	The scanning process of the output device
scripting	Is scripting (e.g. JavaScript) available?
update	How quickly can the output device modify the appearance of the content
width	The viewport width

---