CSS3 Media Queries - Weitere Beispiele
Lassen Sie uns Medien mithilfe von Abfragen auf einige weitere Beispiele.
Wir werden mit einer Liste von Namen beginnen, die als E-Mail-Links funktionieren. Der HTML ist:
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>
Versuch es selber " Beachten Sie die data-email - data-email - Attribut. In HTML5 können wir Attribute mit dem Präfix verwenden data- Informationen zu speichern. Wir werden das verwenden data- später Attribut.
Breite von 520 bis 699px - Tragen Sie eine E-Mail-Symbol auf jedem Link
Wenn die Breite des Browsers zwischen 520 und 699px ist, werden wir eine E-Mail-Symbol auf jede E-Mail-Link gelten:
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;
}
}
Versuch es selber " Breite von 700 bis 1000px - Vorwort die Links mit einem Text
Wenn die Breite des Browsers zwischen 700 bis 1000px ist, werden wir jede E-Mail-Link mit dem Text Vorwort "E-Mail:":
Beispiel 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
Versuch es selber " Breite oben 1001PX - Bewerben Sie E-Mail-Adresse Links
Wenn die Breite des Browsers über 1001PX ist, werden wir die E-Mail-Adresse an die Links anhängen.
Wir werden den Wert der Nutzung data- Attribut die E - Mail - Adresse nach dem Namen der Person hinzufü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;
}
}
Versuch es selber " Breite oben 1151px - Symbol hinzufügen, wie wir verwendet vor
Für Browser über 1151px Breiten, werden wir erneut auf das Symbol hinzufügen, wie wir zuvor.
Hier haben wir nicht einen zusätzlichen Medienabfrageblock zu schreiben, können wir anhängen nur eine zusätzliche Medienabfrage zu unserem bereits bestehenden ein Komma (dies wie ein OR-Operator verhalten wird):
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;
}
}
Versuch es selber " 
Mehr Beispiele
Verwenden Sie die Liste von E - Mail - Links auf einer Seitenleiste in einer Web - Seite
Dieses Beispiel stellt die Liste der E-Mail-Links in der linken Seitenleiste einer Webseite.