CSS @media (Media)

CSS media types allow you to format documents so that they display correctly on various types of media (such as screens, printing, auditory browsers, etc.).

Introduction to Media Types

CSS @media (media) is one of the most important features of style sheets, allowing you to specify separate style sheets for different media types. This is one of the best ways to build printer-friendly web pages.-You can simply assign different style sheets to the 'print' media type.

Some CSS properties are only applicable to certain media. For example, thepage-break-afterThe attribute is only applicable to paginated media. However, there are several attributes that can be shared by different media types, but may require different values for the attribute.font-sizeFor example, the property can be used for screen and print media, but may have different values.

Compared to better readability, documents usually need larger fonts on computer screens than on computer screens, and sans-serif fonts are also considered easier to read on screens, while serif fonts are popular in printing. Therefore, it is necessary to specify that the style sheet or a set of style rules applies to certain media types.

Create media-dependent style sheets

There are usually three methods used to specify the media dependency of style sheets:

method1: Use @media rule

The @media rule is used to define different style rules for different media types in a single stylesheet. Typically, it is followed by a list of media types separated by commas and a CSS declaration block containing the style rules for the target media.

The style declarations in the following example tell the browser to display the content on the screen with14Arial font displays the body content, but in the case of printing, it will be displayed in Times point font12point. Howeverline-heightBoth property values are set to1.2:

@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;
　　　　}
}

method2: Use @import rule

This @import rule is another way to set style information for specific target media-Only specify the comma-separated media types after the URL of the imported stylesheet.

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
　　　　background: #f5f5f5;
　　　　line-height:　1.2;
}

The print media type @import statement in the statement indicates that the browser loads the external stylesheet (print.css) and applies its styles only to print media.

method3: Use <link> element

Elements with the 'media' attribute are used to specify the target medium as an external stylesheet in an HTML document.

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">

In this example, the media attribute indicates that the browser loads the external stylesheet "screen.css" and applies its styles only to the screen, while "print.css" is used for printing.

Different Media Types

The following table lists various media types that can be used to locate different types of devices (such as printers, handheld devices, computer screens, etc.).

Media Type