Exemples de requêtes média CSS3

Dans ce chapitre, nous allons présenter quelques exemples de requêtes multimédia.

Avant de commencer, créons une liste de liens e-mail. Le code HTML est le suivant :

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 »

Remarquedata-emailAttribut. En HTML, nous pouvons utiliser avecdata-Utilisez des attributs préfixés pour stocker des informations.

Largeur de 520 à 699px - ajouter une icône e-mail

Lorsque la largeur du navigateur est comprise entre 520 et 699px, ajoutez une icône e-mail avant le 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 »

700 à 1000px - ajouter des informations de préfixe de texte

Lorsque la largeur du navigateur est comprise entre 700 et 1000px, ajoutez "Email: " avant le lien e-mail :

Exemple 3

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

Essayez-le vous-même »

Largeur supérieure à 1001px - ajouter l'adresse e-mail

Lorsque la largeur du navigateur est supérieure à 1001px, ajoutez l'adresse e-mail après le lien.

Nous utiliseronsdata-l'attribut pour ajouter une adresse e-mail après le nom de chaque 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 supérieure à 1151px - ajouter une icône

Lorsque la largeur du navigateur est supérieure à 1001px, une icône sera ajoutée avant le nom de la personne.

Dans l'exemple, nous n'avons pas écrit de blocs de requête supplémentaires ; nous pouvons ajouter d'autres requêtes média après la requête média existante en les séparant par des virgules (similaire à 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 »

Plus d’exemples

Utiliser un lien de liste de diffusion dans la barre latérale d'une page web
Cet exemple ajoute une liste de liens e-mail à la barre latérale gauche de la page web.

autres extensions