CSS Introduction | CSS3 Extensions | Media Query

Media Query

In CSS2, the @media rule supports customized style sheets for different media types. For example, different styles can be applied when an HTML document is displayed on a screen and when it is printed.

In CSS3, the @media rule was further developed so that media queries composed of a media type and one or more expressions can be used. Media queries can control the range where styles are applied through expressions that use media-related properties such as width, height, and color. When media queries are used, styles are adjusted to fit the device accessing the web page without separately changing the content.

CSS3 Media Query Support Versions

The major web browser versions that support CSS3 media queries are as follows. The table also lists the first versions that supported this feature through vendor prefixes.

Media Query Syntax

The following is the syntax when a media query is placed inside a <style> tag in the same file.

Syntax

@media only|not media-type and (expression) { CSS style code; }

As another method, you can also save media queries separately in an external CSS file.

Syntax

<link rel="stylesheet" media="media-type and|only|not (expression)" href="CSS-file-URL"/>

If the media type of the device accessing the web page matches the specified media type and all expressions are true, the media query returns true. When the return value of the media query is true, the CSS style code specified inside the block is executed. You can also specify more complex conditions by using keywords such as and, only, and not.

CSS3 Media Types

CSS3 media types use the definitions from CSS2 as they are. The following are commonly used media types.

CSS3 Media Query Properties

Except for the orientation property, all of the properties above can use the min or max prefix. By using these properties appropriately, you can easily create responsive websites.

CSS3 Media Query Examples

The following example displays the background color as darkorange when the viewport width is 480 pixels or wider. If the viewport width is smaller than that, it changes the background color to lightblue.

<style>
    body { background-color: darkorange; }
    @media screen and (min-width: 480px) {
        body { background-color: lightblue; }
    }
</style>

When the following example is run in a web browser, the background color is displayed as black and the text color as white. But when the web page is printed, the background color is changed to white and the text color to black before printing.

<style>
    @media screen {
        body { background-color: black; color: white; }
    }
    @media print {
        body { background-color: white; color: black; }
    }
</style>

In this way, media queries make it easy to configure different behavior for different media.