It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The @Media CSS Rule: Different Styles for Different Media Types

Reading time 3 min
Published Aug 8, 2017
Updated Oct 15, 2019

Using @media in CSS

As most Internet users browse via devices of various sized-screens, it's crucial to make the design of your website responsive. The most popular way to do that is by using CSS media queries.

With the @media CSS rule, you can specify different styles for different media types or browsing devices. Using a @media query allows you to check various properties of the device (e.g., dimensions or resolution) and apply styles accordingly:

Example
@media only screen and (max-width: 600px) {
    body {
        background-color: blue;
    }
}

Syntax for CSS @media

The syntax for the @media rule in CSS is as follows:

@media mediatype (mediafeature) {
style;
}

Element Explanation
mediatype Device type
mediafeature Browser/device properties
style Styles to be applied

Media types

Value Used for Syntax
all All media type devices @media all
print Printers @media print
screen Computer screens, smart-phones, tablets etc. @media screen
speech Screen-readers @media speech

Deprecated media types

Value Used for
aural Sound and speech synthesizers
braille Feedback devices for Braille
embossed Paged printers for Braille
handheld Handheld or small devices
projection Slides and presentations that are projected
tty Media using a fixed-pitch character grid (e.g., teletypes)
tv Television devices

Media features

Value Description
any-hover Checks if hovering is available
any-pointer Checks if pointing is available and accurate
aspect-ratio The ratio between the viewport's width and height
color The bits per color number component for the output device
color-gamut Color palette supported by the browser and output device
color-index The number of colors the device can display
display-mode The application's display mode
forced-colors Checks if the browser limits the use of the color palette
grid Whether the device is bitmap or grid
height The height of the viewport
hover Checks if hovering is available with the primary input
inverted-colors Checks if the browser inverts the colors
light-level Level of light in the environment
monochrome Bits per color number on the monochrome device
orientation The viewport's orientation (portrait/landscape)
overflow-block Means the content overflows the viewport along the axis of the block
overflow-inline Means the content overflows the viewport along the axis of the inline
pointer Checks if primary input can point and how accurately
resolution The resolution of the output device in dpcm or dpi
prefers-color-scheme The preferred color scheme of the user
prefers-contrast The preferred color contrast of the user
prefers-reduced-motion The preferred level of motion of the user
prefers-reduced transparency The preferred transparency of the user
resolution Resolution of the output device
scan The scanning process of the output device
scripting Checks if scripting is available
update The frequency at which the output device modifies the content
width The width of the viewport

Including operators

You can use logical operators to create more complex queries in CSS. In the @media query example below, you can see and used twice:

Example
@media screen and (max-width: 950px) and (min-width: 625px) {
  div.example {
    font-size: 45px;
    padding: 55px;
    border: 6px solid yellow;
    background: lightgrey;
  }
}

See what operators are available in the table below:

Operator Used to
and Combine multiple media features
not Negate the @media query
only Specify that the whole @media query must match

Note: you can use a comma as the logical operator or.

Browser support

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
1+
Browser image
IE
6+
Browser image
Opera
9.2+
Browser image
Safari
1.3+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
10.1+
Browser image
Safari
3.1+