CSS3 preguntas de los medios - Más ejemplos
Veamos algunos ejemplos más de la utilización de preguntas de los medios.
Vamos a empezar con una lista de nombres que funcionan como enlaces de correo electrónico. El HTML es:
Ejemplo 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>
Inténtalo tú mismo " Nótese la data-email de atributos. En HTML5, podemos usar el prefijo atributos data- para almacenar información. Vamos a utilizar el data- de atributos más tarde.
Ancho de 520 a 699px - Aplicar un icono de correo electrónico a cada enlace
Cuando el ancho del navegador es de entre 520 y 699px, aplicaremos un icono de correo electrónico a cada enlace de correo electrónico:
Ejemplo 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;
}
}
Inténtalo tú mismo " Ancho de 700 a 1000 píxeles - Prefacio los vínculos con un texto
Cuando el ancho del navegador es de entre 700 a 1000 píxeles, que le Prefacio cada enlace de correo electrónico con el texto "Correo electrónico:":
Ejemplo 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
Inténtalo tú mismo " Anchura por encima de 1001PX - Aplicar dirección de correo electrónico a los enlaces
Cuando el ancho del navegador está por encima de 1001PX, nosotros agregamos la dirección de correo electrónico a los enlaces.
Vamos a utilizar el valor de la data- de atributos para agregar la dirección de correo electrónico después del nombre de la persona:
Ejemplo 4
@media screen and (min-width: 1001px) {
ul li
a:after {
content: " (" attr(data-email)
")";
font-size: 12px;
font-style: italic;
color:
#666666;
}
}
Inténtalo tú mismo " Anchura por encima de 1151px - Añadir icono ya que utilizamos antes
Para anchos de navegador por encima de 1151px, vamos a agregar el icono de nuevo, ya que utilizamos antes.
Aquí, no tenemos que escribir un bloque de consulta de medios adicionales, podemos simplemente añadir una consulta de medios adicionales a nuestra ya existente utilizando una coma (esto se comportará como un operador OR):
Ejemplo 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;
}
}
Inténtalo tú mismo " 
Más ejemplos
Utilice la lista de enlaces de correo electrónico en una barra lateral en una página web
Este ejemplo pone la lista de enlaces de correo electrónico en la barra lateral izquierda de una página web.