04-media.

md 9/13/2022

Media Queries
Objetivos:

Comprender cómo crear sitios web responsives.

Conocer de forma glogal la regla @media de CSS.

Responsive web design

Es un enfoque aplicado al diseño web que permite que un mismo sitio web se adapte al tamaño de la
ventana desde donde se está mostrando, y así se pueda ver perfectamente bien desde cualquier
dispositivo.

CSS media queires

mozilla
Las media queries (en español "consultas de medios") son útiles cuando deseas modificar tu página
web en función del tipo de dispositivo (como una impresora o una pantalla) o de características y
parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).

Sintaxis
Las media queries consisten de un tipo de medio opcional y una o más expresiones de características
de medios.
Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y
minúsculas.

Fuente original imagen

@media Rule

1 / 10
04-media.md 9/13/2022

La regla CSS @media asocia un grupo de declaraciones anidadas, en un bloque CSS delimitado por
llaves, con una condición definida por un media query.

Media Types
all: Apto para todos los dispositivos.
print: Destinado a material impreso y visualización de documentos en una pantalla en el modo de vista
previa de impresión.
screen: Destinado principalmente a las pantallas.
speech: Destinado a sintetizadores de voz.

CSS 2.1 y Media Queries 3 definió varios tipos de media adicionales (tty, tv, projection, handheld, braille,
embossed, aural), pero fueron descontinuados en Media Queries 4 y no deben ser usados.

Media Feature
Una vez que definimos el tipo de medio que estamos tratando de hacer coincidir (media types),
podemos comenzar a definir con qué características estamos tratando de hacerlo coincidir.
Existen muuuuuchos: lista detallada
Los más populares: max-width min-width

@media all and (min-width: 500px) {

h1 {
color: blue;
}
}

@media screen and (min-width: 500px) {

h1 {
color: blue;
}
}

Operadores Lógicos
Las consultas de medios admiten operadores lógicos como muchos lenguajes de programación para
que podamos hacer coincidir los tipos de medios en función de ciertas condiciones.
not, and, y only.

@media screen and (min-width: 500px) and (max-width: 600px) {

h1 {
color: blue;
}
}

2 / 10
04-media.md 9/13/2022

Tal vez queramos apuntar a los dispositivos por lo que no admiten o no coinciden. Esta declaración elimina el
color de fondo del cuerpo cuando el dispositivo es una impresora y solo puede mostrar un color.

@media print and ( not(color) ) {

body {
background-color: none;
}
}

Mobile-first vs Desktop-first
El término Mobile-First significa que cuando desarrollamos un sitio web, primero comenzamos a
escribir el CSS para tamaños de ventana de visualización más pequeños y luego usamos consultas de
medios de CSS para modificar la experiencia para los más grandes (por ejemplo, tabletas o
computadoras de escritorio).

.grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}

@media (min-width: 500px) {

.grid {
grid-template-columns: 1fr 1fr;
}
.item:nth-child(3) {
grid-column: span 2;
}
}

3 / 10
04-media.md 9/13/2022

@media (min-width: 600px) {

.grid {
grid-template-columns: 1fr 1fr 1fr;
}
.item:nth-child(3) {
grid-column: span 1;
}
}

.item {
border: 3px solid magenta;
padding: 10px;
text-align: center;
}

Por otro lado, cuando usamos Desktop First , es al revés.

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}

.item {
border: 3px solid magenta;
padding: 10px;
text-align: center;
}

@media (max-width: 600px) {

.grid {
grid-template-columns: 1fr 1fr;
}

4 / 10
04-media.md 9/13/2022

.item:nth-child(3) {
grid-column: span 2;
}
}

@media (max-width: 500px) {

.grid {
grid-template-columns: 1fr;
}

.item:nth-child(3) {
grid-column: span 1;
}
}

Pero en la práctica uno trabaja de forma paralela, maneje cada sección/componente por separado
comenzando primero con el móvil y luego mejorando para tamaños más grandes.

Breakpoint
Los puntos de interrupción o quiebre son anchos personalizables que determinan cómo se comporta
su diseño receptivo en los tamaños de dispositivo o ventana gráfica.
En Bootstrap 5
En TailwindCSS

.container {
max-width: 95%;
margin-left: auto;
margin-right: auto;
}

@media (min-width: 576px) {

.container {
max-width: 80%;
5 / 10
04-media.md 9/13/2022

}
}

.grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}

@media (min-width: 576px) {

.grid {
grid-template-columns: 1fr 1fr;
}
.item:nth-child(3) {
grid-column: span 2;
}
}

@media (min-width: 768px) {

.grid {
grid-template-columns: 1fr 1fr 1fr;
}
.item:nth-child(3) {
grid-column: span 1;
}
}

.item {
border: 3px solid magenta;
padding: 10px;
text-align: center;
}

Basic First
otra teoría
Trabajo en pequeños componentes. (modularizando CSS)
se basa en un principio muy simple, que solo si el estilo es común a todos los puntos de interrupción,
se escribirá en la raíz principal del componente.
Defina puntos de interrupción cerrados.
¡Las anulaciones de CSS son malas! Trate siempre de evitarlos.

.grid {
display: grid;
gap: 10px;
}

/* Punto de interrupción cerrado */

@media (min-width: 576px) and (max-width: 767px) {
.grid {

6 / 10
04-media.md 9/13/2022

grid-template-columns: 1fr 1fr;

}
.item:nth-child(3) {
grid-column: span 2;
}
}

/* Punto de interrupción abierto */

/* Válido si es el último punto de interrupción */
@media (min-width: 768px) {
.grid {
grid-template-columns: 1fr 1fr 1fr;
}
}

.item {
border: 3px solid magenta;
padding: 10px;
text-align: center;
}

Prácticas
codepen 1
codepen 2

Práctica #01

<div class="grid">
<header>Header</header>
<aside>Sidebar</aside>
<main>Main</main>
<footer>Footer</footer>
</div>

.grid {
display: grid;
gap: 5px;
grid-template-columns: 1fr 5fr;
grid-template-areas:
"header header"
"sidebar sidebar"
"main main"
"footer footer";
}

@media (min-width: 576px) {

.grid {
grid-template-areas:

7 / 10
04-media.md 9/13/2022

"header header"
"sidebar main"
"footer footer";
}
}

header,
aside,
main,
footer {
border: 3px solid salmon;
padding: 10px;
text-align: center;
}

header {
grid-area: header;
}

aside {
grid-area: sidebar;
}

main {
grid-area: main;
}

footer {
grid-area: footer;
}

Práctica #02

@media (min-height: 576px) {

header {
background-color: black;
color: white;
position: sticky;
top: 0;
}
}

Dark mode
artículo
en detalle
Tener un esquema de color de "modo oscuro" es algo que estamos viendo mucho más en estos días, y
gracias a la función prefers-color-scheme, podemos aprovechar el sistema de un usuario o las

8 / 10
04-media.md 9/13/2022

preferencias del navegador para determinar si servimos un "dark" o un "light" tema.

light: cuando un usuario ha seleccionado que prefiere un tema claro o no tiene preferencias activas
dark: cuando un usuario ha seleccionado una pantalla oscura en su configuración

@media screen and (prefers-color-scheme: dark) {

body {
background-color: black;
color: white;
}
}

Imágenes responsives
artículo

<main>
<picture>
<source
srcset="img/img-xl.jpg"
media="(min-width: 800px)"
/>
<source
srcset="img/img-md.jpg"
media="(min-width: 500px)"
/>
<img src="img/img-sm.jpg" alt="" />
</picture>
</main>

HTML
Hay algunas formas en que podemos usar las consultas de medios directamente en HTML.
En este ejemplo. le estamos diciendo al navegador que queremos usar diferentes hojas de estilo en
diferentes tamaños de ventana gráfica:

<link rel="stylesheet" href="main.css" />

<link rel="stylesheet" href="md.css" media="(min-width: 540px)" />

Puede ser una buena manera de ajustar el rendimiento de su sitio al dividir los estilos de manera que
los dispositivos que los necesitan los descarguen y los sirvan.
no siempre evita que se descarguen las hojas de estilo que no coinciden con esas consultas de medios,
simplemente les asigna un nivel de prioridad de carga bajo.
Por lo tanto, si un dispositivo de pantalla pequeña como un teléfono visita el sitio, solo descargará las
hojas de estilo en las consultas de medios que coincidan con el tamaño de su ventana gráfica. Pero si

9 / 10
04-media.md 9/13/2022

aparece una pantalla de escritorio más grande, descargará todo el grupo porque coincide con todas
esas consultas (bueno, menos la consulta de impresión en este ejemplo específico).
fuente

TailwindCSS
tailwindcss

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS media queries</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto px-4">
<header class="bg-blue-300 sm:bg-red-300 md:bg-green-300">
Header
</header>
<div class="grid sm:grid-cols-12">
<aside
class="dark:bg-gray-900 dark:text-white hidden sm:block
sm:col-span-3 bg-gray-300"
>
Sidebar
</aside>
<main class="text-xl sm:col-span-9">main</main>
</div>
<footer class="text-center">Footer</footer>
</div>
</body>
</html>

10 / 10