CSS3 Media Queries

CSS2 Media Types

@mediaThe rules were introduced in CSS2, allowing different style rules to be customized for different media types.

For example: you can set different style rules for different media types (including monitors, portable devices, televisions, etc.).

However, these media types are not yet well supported on many devices.

CSS3 Media Queries

CSS3 media queries inherit all the ideas of CSS2 media types: instead of looking up the type of device, CSS3 adaptively displays based on the settings.

Media queries can be used to detect many things, for example:

  • The width and height of the viewport
  • Device Width and Height
  • Orientation (smartphone landscape, portrait).
  • resolution

Currently, many devices such as iPhones, Android phones, tablets, etc., use media queries.

Browser Support

The numbers in the table indicate the first browser version that supports the property.

Property
@media 21.0 9.0 3.5 4.0 9.0

Media Query Syntax

A media query is composed of multiple media types and can contain one or more expressions. The expressions return true or false depending on whether the conditions are met.

@media not|only mediatype and (expressions) { CSSCode...;}

If the specified media type matches the device type, the query returns true, and the document will display the specified style effects on the matching device.

Unless you use the not or only operators, all styles will adapt to display effects on all devices.

  • not:not is used to exclude certain specific devices, such as @media not print (non-print devices).

  • only:It is used to specify a particular media type. For mobile devices that support Media Queries, if the only keyword is present, the mobile device's Web browser will ignore the only keyword and directly apply the style file based on the following expression. For Web browsers that do not support Media Queries but can read Media Type, when encountering the only keyword, they will ignore this style file.

  • all:All devices. This one should be commonly seen.

You can also use different style files on different media:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 Media Types

Value Description
all Used for all media type devices
print For printers
screen For computer screens, tablets, smartphones, etc.
speech For Screen Readers

Simple Examples of Media Queries

Using media queries, you can use corresponding styles on specified devices to replace the original styles.

In the following example, the background color is modified on devices where the screen viewport size is less than 480 pixels:

Example

@media screen and (max-width: 480px) { body { background-color: lightgreen; } }

Try it Yourself »

In the following example, when the screen viewport size is greater than 480 pixels, the menu floats to the left side of the page:

Example

@media screen and (min-width: 480px) { #leftsidebar {width: 200px; float: left;} #main {margin-left:216px;} }

Try it Yourself »

In the following example, when the screen viewport size is less than 600 pixels, the div element is hidden:

Example

@media screen and (max-width: 600px) { div.example { display: none; } }

Try it Yourself »

CSS3 @media Reference

For more media query content, please refer to@mediarules.

other extensions