CSS3 Requêtes médias - Autres exemples
Regardons quelques exemples de l'utilisation de requêtes des médias.
Nous allons commencer par une liste de noms qui fonctionnent comme des liens e-mail. Le code HTML est:
Exemple 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>
Essayez - le vous - même » Notez le data-email attribut. En HTML5, nous pouvons utiliser des attributs préfixés avec de data- pour stocker des informations. Nous allons utiliser le de data- attribut plus tard.
Largeur de 520 à 699px - Appliquer une icône e-mail à chaque lien
Lorsque la largeur du navigateur se situe entre 520 et 699px, nous appliquons un email icône pour chaque lien e-mail:
exemple 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;
}
}
Essayez - le vous - même » Largeur de 700 à 1000px - Préface des liens avec un texte
Lorsque la largeur du navigateur est entre de 700 à 1000px, nous préfacer chaque lien e-mail avec le texte "Email:":
exemple 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
Essayez - le vous - même » Largeur ci-dessus 1001PX - Appliquer adresse e-mail aux liens
Lorsque la largeur du navigateur est au-dessus 1001PX, nous ajoutons l'adresse e-mail pour les liens.
Nous allons utiliser la valeur de la de data- attribut pour ajouter l'adresse e - mail après le nom de la personne:
exemple 4
@media screen and (min-width: 1001px) {
ul li
a:after {
content: " (" attr(data-email)
")";
font-size: 12px;
font-style: italic;
color:
#666666;
}
}
Essayez - le vous - même » Largeur ci-dessus 1151px - Ajouter icône que nous utilisions auparavant
Pour le navigateur largeurs ci-dessus 1151px, nous allons à nouveau ajouter l'icône que nous utilisions auparavant.
Ici, nous ne disposons pas d'écrire un bloc de requête des médias supplémentaires, nous pouvons simplement ajouter une requête multimédia supplémentaire à notre déjà existant en utilisant une virgule (cela va se comporter comme un opérateur OR):
exemple 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;
}
}
Essayez - le vous - même » 
Autres exemples
Utilisez la liste des liens de messagerie sur une barre latérale dans une page web
Cet exemple met la liste des liens e-mail dans la barre latérale gauche d'une page Web.