Hacer que los sitios se
vean y se comporten
de manera óptima
en todos los dispositivos informáticos
@media rule;
Es un método para probar
aspectos del agente de usuario o dispositivo
en el que se renderiza el documento.
Para todos los dispositivos
Impresoras y dispositivos destinados a reproducir una pantalla
impresa,
como un navegador web que muestra un documento
en “Vista previa de impresión”.
Todos los dispositivos que no matcheen con media: print
¿Qué cosas puedo saber de un dispositivo?
Landscape (paisaje / horizontal) or portrait (retrato / vertical)
Alto máximo / mínimo del vieport
Ancho máximo / mínimo del vieport
¿Qué cosas puedo saber de un dispositivo?
alto o ancho del viewport (incluyendo la barra de scroll)
[Sintaxis de Rango]
@media only screen and (min-width: 576px) {
// aplicar los estilos aquí a partir de este ancho mínimo de
// 576px (dispositivos con tamaño de pantalla medio)
// Sería el equivalente a
(width >= 576px)
}
Invierte el significado de una media query
evita que los navegadores antiguos que no admiten consultas de
medios con funciones multimedia apliquen los estilos especificados.
No tiene ningún efecto en los navegadores modernos.
Combina una característica de medios con
un tipo de medio u otra características de los medios.
@media (max-aspect-ratio: 3/2) { ... }
@media (aspect-ratio: 1/1) { ... }
@media (color) { ... }
@media (min-color: 8) { ... }
@media (monochrome) { ... }@media (resolution: 150dpi) { ... }
@media (min-resolution: 72dpi) { ... }
@media (max-resolution: 300dpi) { ... }
@media (pointer: fine) { //fino
input[type="checkbox"] {
width: 15px; height: 15px;
border-width: 1px; border-color: blue;
}
}
@media (pointer: coarse) { //grueso
input[type="checkbox"] {
width: 30px; height: 30px;
border-width: 2px; border-color: red;
}
}none | initial-only | enabled
light | dark
no-preference | less | more | custom
Atributo media de la etiqueta <source>
una media query y el punto de quiebre que deseamos
para que se muestren diferentes imagenes.
min: cota inferior.
val: dentro del rango, como calcular la medida.
max: cota superior.
article {
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
}
article.otros {
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
}