CSS @media Rule

The @media rule can be used to define style rules for multiple media types within a single stylesheet. It must be followed by a comma-separated list of media types and a block containing the rules.

You can define different styles for different media types using the @media rule.

@media can set different styles for different screen sizes, especially if you need to set responsive page designs, @media is very useful.

When you resize the browser, the page will also be re-rendered according to the width and height of the browser.

CSS @media rule usage syntax

The syntax of this rule is as follows:

@media　media　type,...　{
　　　　/*　media-specific　rules　*/
}

You can also use different CSS styles for different media:

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

The following example demonstrates how to use the @media attribute.

@media　screen{
body　{
color:　#32cd32;
		　　font-family:　Arial,　sans-serif;
font-size:　14px;
}
}
@media　print　{
body　{
color:　#ff6347;
		　　font-family:　Times,　serif;
font-size:　12pt;
}
}
@media　screen,　print　{
body　{
line-height:　1.2;
}
}

Media type

Media function

Browser Compatibility

Browser compatibility of @media attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this rule.

Further Reading

Please refer to the following tutorials:CSS Media Types.