Hemos cubierto el uso de consultas de medios CSS para asignar diferentes hojas de estilo según el tamaño de la ventana del navegador. En ese ejemplo, cambiamos el diseño de toda la página según el espacio disponible. Sin embargo, no es necesario que hagamos cambios tan drásticos con esta técnica, por lo que en este tutorial repasaremos un ajuste de diseño con un alcance menor. También cubriremos la sintaxis para usar consultas de medios dentro de una sola hoja de estilo y más ejemplos de eso.
La sintaxis de consulta de medios CSS para llamar a una hoja de estilo externa es la siguiente:
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="https://css-tricks.com/css-media-queries/css/medium.css" />
Es posible que esté familiarizado con el atributo media, que normalmente es “pantalla” o “impresión” o incluso una lista separada por comas, como “pantalla, proyección”. El atributo de medios se puede traer directamente dentro de un archivo CSS, como este:
@media screen {
body {
width: 75%;
}
}
@media print {
body {
width: 100%;
}
}Del mismo modo, puede utilizar consultas de medios CSS más avanzadas como:
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
body {
background: #ccc;
}
}Puede utilizar tantas consultas de medios como desee en un archivo CSS. Tenga en cuenta que puede utilizar el y operador para requerir que varias consultas sean verdaderas, pero debe usar la coma (,) como el o operador para separar grupos de consultas múltiples. El no La palabra clave también se puede utilizar para alterar la lógica.
Ejemplo
Digamos que tenemos un diseño de ancho fluido donde la barra lateral es el 35% del ancho de la página. Eso significa que, dependiendo del ancho de la ventana del navegador, esa barra lateral podría ser bastante estrecha o bastante ancha, esa es solo la naturaleza de los diseños de ancho fluido. Con las consultas de medios CSS, podemos decir “si el navegador es realmente estrecho, haz esto, si es más ancho, haz esto, si es realmente amplio, haz esto”. Tenga en cuenta que medir el ancho no es lo único que pueden hacer las consultas de medios, es solo un ejemplo particularmente práctico.
En nuestra barra lateral de ejemplo, vamos a tener una lista de nombres del Súper Equipo que funcionan como enlaces de correo electrónico. El HTML es bastante simple:
<ul id="nav">
<li><a data-email="[email protected]" href="https://css-tricks.com/css-media-queries/mailto:[email protected]">Chris Coyier</a></li>
<li><a data-email="[email protected]" href="https://css-tricks.com/css-media-queries/mailto:[email protected]">Elisabeth Moss</a></li>
<li><a data-email="[email protected]" href="https://css-tricks.com/css-media-queries/mailto:[email protected]">Amanda Righetti</a></li>
</ul>Es solo una lista de enlaces. El href atributo es un mailto: Enlace. Lo único que puede encontrar inusual es la data-email atributo. En HTML5, puede utilizar atributos con el prefijo data- para almacenar información, y es perfectamente válido. Vamos a querer usar esos datos más tarde, pero el href el valor no es exactamente lo que necesitamos tener mailto: enlace, de ahí el atributo de datos.
El estilo predeterminado para la lista será este:
#sidebar ul li a {
color: #900;
text-decoration: none;
padding: 3px 0;
display: block;
}
En anchos de ventana del navegador estrechos, se aplica el estilo predeterminado. Solo una lista de enlaces.
Cuando el navegador se ensancha un poco, en nuestro ejemplo entre 520 y 699 px, usaremos ese espacio adicional que se abre en la barra lateral para aplicar un ícono de correo electrónico a cada elemento de la lista.
@media all and (max-width: 699px) and (min-width: 520px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
Los iconos se aplican a los elementos de la lista, ya que sabemos que ahora tenemos espacio para ellos.
A medida que nos ensanchamos, de 700 a 1000 px, usaremos el espacio adicional nuevamente para comenzar los enlaces con el texto “Correo electrónico:” (usando contenido CSS) en lugar de solo el ícono.
@media all and (max-width: 1000px) and (min-width: 700px) {
#sidebar ul li a:before {
content: "Email: ";
font-style: italic;
color: #666;
}
}
Usando contenido CSS / elemento psuedo, podemos preceder el enlace con texto descriptivo sin alterar el contenido en el HTML
Aún más amplio, en anchos de ventana del navegador por encima de 1001px, agregaremos literalmente la dirección de correo electrónico a los enlaces. Aquí es donde entra el atributo de datos HTML5.
@media all and (min-width: 1001px) {
#sidebar ul li a:after {
content: " (" attr(data-email) ")";
font-size: 11px;
font-style: italic;
color: #666;
}
}
Nuevamente se ajusta el contenido, el correo electrónico se agrega como un elemento pseduo puramente con CSS.
En anchos realmente amplios, por encima de 1151px, agregaremos nuevamente el ícono como lo usamos antes. Lo bueno aquí es que no tenemos que escribir un segmento de consulta de medios adicional, simplemente podemos agregar una consulta de medios adicional a nuestra ya existente usando una coma (se comporta como el operador OR) en el de ancho medio que ya escribimos. .
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
En el más amplio, podemos utilizar todo el estilo que tenemos disponible.
Todos juntos ahora
#sidebar ul li a {
color: #900;
text-decoration: none;
padding: 3px 0;
display: block;
}
@media all and (min-width: 1001px) {
#sidebar ul li a:after {
content: " (" attr(data-email) ")";
font-size: 11px;
font-style: italic;
color: #666;
}
}
@media all and (max-width: 1000px) and (min-width: 700px) {
#sidebar ul li a:before {
content: "Email: ";
font-style: italic;
color: #666;
}
}
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
Video de demostración
Demo en vivo / descarga
Ver demostración Descargar archivos
Soporte del navegador
El soporte del navegador para consultas de medios es sorprendentemente decente. Para las consultas en esta demostración en particular (utilizando anchos mínimo y máximo), la versión actual de Firefox, Safari (incluido Mobile), Chrome y Opera lo admiten. Internet Explorer 9 lo admitirá, pero 8 y versiones anteriores no. Si quisiera ofrecer la mejor experiencia posible en IE 8 y versiones anteriores, lo falsificaría con JavaScript como lo hice en este artículo, o usaría una hoja de estilo específica de IE y le daría estilo en el mismo estilo que el ancho de navegador más común según a la analítica.
Tenga en cuenta que el kilometraje puede variar según los tipos individuales de consultas. Por ejemplo, el iPhone admite consultas de ancho pero no admite consultas de orientación. El iPad es compatible con ambos.
Más sobre consultas de medios
Medir el ancho es un buen ejemplo práctico de consultas de medios, pero no es lo único disponible. A continuación se muestran algunos de ellos (no es una lista completa). La especificación enumera mucho más.
Tipos
HTML4 tenía estos tipos de medios, que siguen siendo válidos: auditivo, braille, portátil, impreso, de proyección, de pantalla, tty y tv. HTML5 puede incluir más a medida que los necesite. La especificación incluye ‘gafas 3d’, lo cual es increíble. La palabra clave all se dirigirá a todos los tipos.
@media screen, projection { ... }Dimensiones
Obtiene la altura y el ancho, que consultan contra la altura y el ancho de la ventana del navegador actual. Puede usarlos tal cual, pero probablemente sea raro. Ambos aceptan prefijos mínimo / máximo, por lo que lo más común es que los haya usado como ancho mínimo, ancho máximo, altura mínima, altura máxima.
También hay device-width y device-height, que también proporcionan min-device-width, max-device-width, min-device-height y max-device-height.
@media (min-device-width: 640px) { ... }Orientación / Relación de aspecto
También puede consultar la relación de aspecto de la pantalla con la relación de aspecto del dispositivo.
@media screen and (device-aspect-ratio: 16/9) { ... }O si la pantalla está en modo retrato (altura mayor que ancho) u horizontal (ancho mayor que alto).
@media (orientation:portrait) { ... }Color
Puede consultar si la pantalla está en color o no y detalles al respecto.
@media (color) { /* Screen is in color */ }
@media (min-color-index: 256) { /* Screen has at least 256 colors */ }
@media (monochrome) { /* Screen is monochrome */ }En otra parte
Este ha sido un tema candente últimamente. Puede escuchar a algunas personas inteligentes hablar de ello en The Big Web Show. Aquí hay algunos otros usos interesantes que se han utilizado recientemente:
- Andy Clarke muestra cómo cuanto más larga es la línea, más legible puede ser el texto con una altura de línea más alta.
- El sitio de Jon Hick se reorganiza para tener barras laterales dobles, barra lateral única o ninguna barra lateral según el espacio disponible. Incluso se adapta muy bien a tamaños móviles.
- La demostración de Ethan Marcotte para A List Apart no utiliza consultas de medios, pero muestra otras formas en que un diseño puede ser eficazmente flexible.
- El sitio de Simon Collison reorganiza su cuadrícula para adaptarse a diferentes tamaños de navegador.
- Panic usa @media en sus correos electrónicos HTML para que se vean increíbles en clientes de correo electrónico de escritorio o móviles.