CSS3 Ejemplos de consultas de medios

En este capítulo, demostraremos algunos ejemplos de consultas de medios.

Antes de comenzar, primero crearemos una lista de enlaces de correo electrónico. El código HTML es el siguiente:

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>

Pruébalo »

Notadata-emailAtributos. En HTML, podemos usar condata-prefijo para almacenar información.

Ancho de 520 a 699px: agregar icono de correo electrónico

Cuando el ancho del navegador esté entre 520 y 699px, agrega un icono de correo antes del 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;
    }
}

Pruébalo »

De 700 a 1000px: agregar información de prefijo de texto

Cuando el ancho del navegador esté entre 700 y 1000px, se agregará "Email: " antes del enlace de 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;
    }
}

Pruébalo »

Ancho mayor que 1001px: agregar dirección de correo electrónico

Cuando el ancho del navegador sea mayor que 1001px, se agregará la dirección de correo electrónico después del enlace.

Usaremosdata-atributos para agregar la dirección de correo electrónico después de cada nombre:

Ejemplo 4

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}

Pruébalo »

Ancho mayor que 1151px: agregar icono

Cuando el ancho del navegador sea mayor que 1001px, se agregará un icono antes del nombre.

En el ejemplo, no escribimos bloques de consulta adicionales; podemos usar comas después de la consulta de medios existente para agregar otras consultas de medios (similar al 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;
    }
}

Pruébalo »

Más ejemplos

Usar enlaces de lista de correo en la barra lateral de una página web
Este ejemplo agrega una lista de enlaces de correo electrónico en la barra lateral izquierda de la página web.

Otras extensiones