CSS @media (Media)

CSS Mediengattungen ermöglichen es Ihnen, Dokumente zu formatieren, damit sie auf verschiedenen Arten von Medien (z.B. Bildschirm, Druck, Hörbrowser usw.) korrekt angezeigt werden.

Einführung in die Mediengattungen

CSS @media (Medien) ist eine der wichtigsten Funktionen der Stylesheets, mit der Sie separate Stylesheets für verschiedene Mediengattungen angeben können. Dies ist eine der besten Methoden zur Erstellung von Druckerfreundlichen Webseiten.-Für das 'Druck'-Mediengattung einfach eine andere Stylesheet zuweisen.

Einige CSS-Attribute gelten nur für bestimmte Mediengattungen. Zum Beispiel dasSeite-unterbrechen-nachDas Attribut gilt nur für paginierte Medien. Es gibt jedoch einige Attribute, die von verschiedenen Mediengattungen gemeinsam genutzt werden können, aber möglicherweise unterschiedliche Werte für dieses Attribut erforderlich sind.font-sizeFor example, this 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 a stylesheet or a set of style rules applies to certain media types.

Create media-dependent style sheets

There are usually three methods to specify the media dependencies of a stylesheet:

method1: Using @media rules

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 text on the screen14Arial font displays the body text, but in the case of printing, it will be displayed in Times point font12dot. Howeverline-heightBoth properties 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: Using @import rules

This @import rule is another way to set style information for specific target media-You can specify the media types separated by commas 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 @import statement with the print media type indicates to the browser to load an external stylesheet (print.css) and apply its styles only to print media.

method3: Using <link> element

Elements with the 'media' attribute are used to specify that the target medium is 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 diesem Beispiel zeigt die media-Eigenschaft an, dass der Browser das externe Stilblatt "screen.css" lädt und nur die Stile für den Bildschirm verwendet, während "print.css" für den Druck verwendet wird.

Verschiedene Mediendetails

Die nachstehende Tabelle zeigt verschiedene Mediendetails auf, die zur Lokalisierung verschiedener Arten von Geräten (z.B. Drucker, tragbare Geräte, Computerbildschirme) verwendet werden können.

Medientyp