Exemple de requête multimédia CSS3
Exemples de requêtes multimédia CSS3
Dans ce chapitre, nous présenterons pour vous quelques exemples de requêtes multimédia.
Avant de commencer, faisons une liste de liens d’adresses e-mail. Le code HTML est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>Faites attention à l'attribut data-email. En HTML, nous pouvons utiliser des attributs avec le préfixe data- pour stocker des informations.
Largeur de 520 à 699 px - ajouter une icône d'e-mail
Lorsque la largeur du navigateur est comprise entre 520 et 699 px, ajoutez une icône d'e-mail avant le lien de l'e-mail :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>700 à 1000px - Ajouter des informations de préfixe de texte
Lorsque la largeur du navigateur est comprise entre 700 et 1000px, "E-mail" sera ajouté avant le lien email : ":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>Largeur supérieure à 1001px - ajoutez une adresse e-mail
Lorsque la largeur du navigateur est supérieure à 1001px, un l'e-mail sera ajouté après la prise en charge de l'adresse du lien.
Nous utiliserons l'attribut data- pour ajouter l'adresse e-mail après le nom de chaque personne :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>>1151px de largeur - ajouter une icône
Lorsque la largeur du navigateur est supérieure à 1001px, une icône sera ajoutée devant le nom de la personne.
Dans l'exemple, nous n'avons pas écrit de blocs de requêtes supplémentaires. Nous pouvons utiliser la séparation par des virgules après le support de requête existant pour ajouter d'autres requêtes multimédias (similaires à l'opérateur OR) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
