CSS3-Media-Query-Beispiele

In diesem Kapitel zeigen wir einige Beispiele für Multimedia-Abfragen.

Bevor wir beginnen, erstellen wir eine Liste mit E-Mail-Links. Der HTML-Code sieht wie folgt aus:

Beispiel 1

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a data-email="[email protected]" href="mailto:[email protected]">John Doe</a></li>
  <li><a data-email="[email protected]" href="mailto:[email protected]">Mary Moe</a></li>
  <li><a data-email="[email protected]" href="mailto:[email protected]">Amanda Panda</a></li>
</ul>

</body>
</html>

Selbst ausprobieren »

Hinweisdata-emailAttribut. In HTML können wir damit verwendendata-Verwenden Sie präfixierte Attribute, um Informationen zu speichern.

520 bis 699px Breite - E-Mail-Symbol hinzufügen

Wenn die Browserbreite zwischen 520 und 699px liegt, fügen Sie ein E-Mail-Symbol vor dem E-Mail-Link hinzu:

Beispiel 2

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

Selbst ausprobieren »

700 bis 1000px - Textpräfix-Informationen hinzufügen

Wenn die Browserbreite zwischen 700 und 1000px liegt, fügen Sie "E-Mail: " vor dem E-Mail-Link hinzu:

Beispiel 3

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "E-Mail: ";
        font-style: italic;
        color: #666666;
    }
}

Selbst ausprobieren »

Breiter als 1001px - E-Mail-Adresse hinzufügen

Wenn die Browserbreite größer als 1001px ist, fügen Sie die E-Mail-Adresse nach dem Link hinzu.

Wir werdendata-das Attribut verwenden, um nach dem Namen jeder Person eine E-Mail-Adresse hinzuzufügen:

Beispiel 4

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}

Selbst ausprobieren »

Breite größer als 1151px – Symbol hinzufügen

Wenn die Browserbreite größer als 1001px ist, wird vor dem Namen der Person ein Symbol eingefügt.

Im Beispiel haben wir keine zusätzlichen Abfrageblöcke geschrieben; wir können weitere Media Queries nach der vorhandenen Media Query unter Verwendung einer Kommatrennung hinzufügen (ähnlich einem OR-Operator):

Beispiel 5

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

Selbst ausprobieren »
实例

Weitere Beispiele

Einen Mailinglisten-Link in der Seitenleiste einer Webseite verwenden
Dieses Beispiel fügt eine Liste mit E-Mail-Links zur linken Seitenleiste der Webseite hinzu.

Weitere Erweiterungen