CSS Media Queries
- Previous Page CSS Flexbox
- Next Page CSS Media Queries Example
CSS2 introduced media types
CSS2 introduced @media
Rules that make it possible to define different style rules for different media types.
For example: you may have a set of style rules for computer screens, a set for printers, a set for handheld devices, even a set for televisions, and so on.
Unfortunately, except for the print media type, these media types have never been widely supported by devices.
CSS3 introduces media queries
CSS3 media queries extend the concept of CSS2 media types: they do not look for device types, but focus on the capabilities of the device.
Media queries can be used to check many things, such as:
- The width and height of the viewport
- The width and height of the device
- Orientation (whether the tablet or phone is in landscape or portrait mode)
- Resolution
Using media queries is a popular technique that provides customized style sheets for desktops, laptops, tablets, and smartphones (such as iPhone and Android phones).
Browser Support
The numbers in the table indicate full support @media
The first browser version of the rules.
Property | |||||
@media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Media Query Syntax
Media queries consist of a media type and can include one or more expressions that can be evaluated to true or false.
@media not|only mediatype and (expressions) { CSS-Code; {}
If the specified media type matches the device type of the document being displayed, and all expressions in the media query are true, the query result is true. When the media query is true, the corresponding stylesheet or style rules are applied, and follow the normal cascade rules.
Unless you use the not or only operators, the media type is optional and implied. all
Type.
You can also use different style sheets for different media:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
CSS3 Media Types
Value | Description |
---|---|
all | For all media type devices. |
For printers. | |
screen | For computer screens, tablets, smartphones, and so on. |
speech | For screen readers that read out the page loudly. |
A simple example of media queries
One way to use media queries is to have an alternative CSS section within the stylesheet.
The following example changes the background color to light green when the viewport width is 480 pixels or wider (if the viewport is less than 480 pixels, the background color will be pink):
Example
@media screen and (min-width: 480px) { body { background-color: lightgreen; {} {}
The following example shows a menu that floats to the left side of the page if the viewport width is 480 pixels or wider (if the viewport is less than 480 pixels, the menu will be at the top of the content):
Example
@media screen and (min-width: 480px) { #leftsidebar {width: 200px; float: left;} #main {margin-left: 216px;} {}
More Media Query Examples
For more media query examples, please visit the next page:CSS MQ Example.
CSS @media Reference Manual
For a complete overview of all media types and properties/expressions, please see our CSS Reference @media Rule.
- Previous Page CSS Flexbox
- Next Page CSS Media Queries Example