CSS3 consultas de mídia - Mais Exemplos
Vejamos mais alguns exemplos do uso de consultas de mídia.
Vamos começar com uma lista de nomes que funcionam como ligações de e-mail. O HTML é:
exemplo 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>
Tente você mesmo " Observe a data-email atributo. Em HTML5, podemos usar atributos prefixados com data- para armazenar informações. Nós vamos usar o data- atributo mais tarde.
Largura de 520 para 699px - Aplicar um ícone e-mail para cada link
Quando a largura do navegador é entre 520 e 699px, vamos aplicar um ícone e-mail para cada link e-mail:
exemplo 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;
}
}
Tente você mesmo " Largura de 700 a 1000 px - Prefácio as ligações com um texto
Quando a largura do navegador é entre 700 a 1000px, vamos prefaciar cada link de e-mail com o texto "Email:":
exemplo 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
Tente você mesmo " Largura acima 1001PX - Aplicar e-mail e ligações
Quando a largura do navegador está acima 1001PX, vamos acrescentar o endereço de e-mail para as ligações.
Nós vamos usar o valor da data- atributo para adicionar o endereço de e-mail após o nome da pessoa:
exemplo 4
@media screen and (min-width: 1001px) {
ul li
a:after {
content: " (" attr(data-email)
")";
font-size: 12px;
font-style: italic;
color:
#666666;
}
}
Tente você mesmo " Largura acima 1151px - Adicionar ícone como que usamos antes
Para o navegador larguras acima 1151px, vamos voltar a adicionar o ícone como que usamos antes.
Aqui, não temos para escrever um bloco de consulta de mídia adicional, podemos apenas acrescentar um consulta de mídia adicional para a nossa já existente usando uma vírgula (isto irá comportar-se como um operador OR):
exemplo 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;
}
}
Tente você mesmo " 
mais Exemplos
Use a lista de links de e-mail em uma barra lateral em uma página da web
Este exemplo coloca a lista de links de e-mail na barra lateral esquerda de uma página web.