CSS3 Media Queries - altri esempi
Vediamo alcuni esempi di utilizzo di media query.
Inizieremo con una lista di nomi che fungono da collegamenti e-mail. L'HTML è:
esempio 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>
Prova tu stesso " Si noti la data-email attributo. In HTML5, siamo in grado di utilizzare gli attributi con prefisso data- per memorizzare le informazioni. Useremo il data- attributo di seguito.
Larghezza da 520 a 699px - Applicare un'icona e-mail a ogni link
Quando la larghezza del browser è compresa tra 520 e 699px, applicheremo una icona e-mail per ogni collegamento e-mail:
esempio 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;
}
}
Prova tu stesso " Larghezza da 700 a 1000 px - Prefazione i legami con un testo
Quando la larghezza del browser è compresa tra da 700 a 1000 px, noi vi prefazione ogni collegamento e-mail con il testo "E-mail:":
esempio 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
Prova tu stesso " Larghezza sopra 1001PX - Applicare indirizzo di posta elettronica per collegamenti
Quando la larghezza del browser è al di sopra 1001PX, si aggiungerà l'indirizzo e-mail per i collegamenti.
Useremo il valore del data- attributo per aggiungere l'indirizzo e-mail dopo il nome della persona:
esempio 4
@media screen and (min-width: 1001px) {
ul li
a:after {
content: " (" attr(data-email)
")";
font-size: 12px;
font-style: italic;
color:
#666666;
}
}
Prova tu stesso " Larghezza sopra 1151px - Aggiungi icona come abbiamo usato prima
Per il browser larghezze sopra 1151px, ci sarà di nuovo aggiungere l'icona come abbiamo usato prima.
Qui, non abbiamo di scrivere un blocco di media query aggiuntivo, possiamo solo aggiungere un ulteriore media query al nostro già esistente utilizzando una virgola (questo si comporterà come un operatore OR):
esempio 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;
}
}
Prova tu stesso " 
Altri esempi
Utilizzare l'elenco di link e-mail su una barra laterale in una pagina web
Questo esempio mette l'elenco dei collegamenti e-mail nella barra laterale sinistra di una pagina web.