¿Qué son las media queries?
Las media queries en CSS son un recurso esencial para crear diseños web adaptables y receptivos. Estas consultas permiten aplicar estilos específicos basados en las características del dispositivo o el entorno de visualización. Con media queries, los diseñadores pueden ajustar el diseño, el tamaño de fuente, los márgenes y otros atributos de diseño según factores como el ancho de la pantalla, la orientación del dispositivo o incluso la densidad de píxeles. Esto garantiza que un sitio web se vea y funcione de manera óptima en diversos dispositivos, desde teléfonos móviles hasta monitores de alta resolución, mejorando la experiencia del usuario en todos los contextos.
Responsive breakpoints (Puntos de interrupción responsivos)
Para crear diseños responsivos es necesario definir estilos limitados por puntos de interrupción, en Tailwind esto se hace utilizando modificadores como md (mediano) y lg (grande).
El siguiente ejemplo desplegará un grid que va aumentando el número de columnas conforme el dispositivo es mas ancho.
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"
>
<div class="bg-pink-100">1</div>
<div class="bg-pink-200">2</div>
<div class="bg-pink-300">3</div>
<div class="bg-pink-400">4</div>
<div class="bg-purple-100">5</div>
<div class="bg-purple-200">6</div>
<div class="bg-purple-300">7</div>
<div class="bg-purple-400">8</div>
</div>
Esquema de colores (prefers-colors-scheme)
El media query prefers-color-scheme indica si el usuario prefiere un modo claro u oscuro, y esto es usualmente configurado a nivel del sistema operativo.
Utiliza las utilidades sin modificadores para personalizar el modo claro, y el modificador dark paa personalizar el modo oscuro.
<div class="rounded-lg bg-white p-5 shadow-lg dark:bg-slate-500">
<div class="mb-8">
<button class="rounded bg-blue-400 px-11 py-2 font-bold text-white">
Play
</button>
</div>
<h2 class="mb-2 font-bold dark:text-slate-100">
Lorem ipsum dolor sit amet
</h2>
<p class="mb-8 dark:text-slate-200">
Consectetur adipisicing elit. Id fuga sunt ab perferendis eligendi
officiis, vero, quaerat molestiae perspiciatis quisquam placeat
praesentium ducimus iste minima distinctio nemo debitis explicabo
assumenda.
</p>
<input
type="checkbox"
onclick="void(document.body.classList.toggle('dark'))"
id="dark-mode"
class="mr-2"
/>
<span class="dark:text-slate-200">Dark Mode</span>
</div>
En este ejemplo hemos podido personalizar un card con los colores para el modo claro y oscuro. Esta tarea es sumamente sencilla en Tailwind y se realiza utilizando el modificador
dark.
Movimiento reducido (prefers-reduced-motion)
El media query prefers-reduced-motion envía la instrucción que se minimicen los movimientos y animaciones a los mas esenciales.
Utiliza el modificador motion-reduce para agregar estilos que sean aplicados durante motion reduce (movimiento reducido).
<button class="flex items-center bg-blue-600 py-3 rounded-lg">
<svg
version="1.1"
id="L9"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 100 100"
enable-background="new 0 0 0 0"
xml:space="preserve"
class="h-[50px] pl-5 motion-reduce:hidden"
>
<path
fill="#fff"
d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
>
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="1s"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite"
></animateTransform>
</path>
</svg>
<span class="text-white font-bold text-xl text-left pl-2 pr-8"
>Cargando</span
>
</button>
Tailwind también incluye un modificador llamado
motion-safe, que agrega los estilos cuando el usuario ha deshabilitado la opciónprefers-reduced-motion.
¿Cómo habilitar el modo reduced motion en Chrome?
Para probar el modo movimiento reducido, abre Chrome y presiona Ctrl+Shift+P en PC o Cmd+Shift+P y escribe prefers-reduced-motion, ahí puedes habilitar o deshabilitar la opción.
Prefers contrast (prefers-contrast)
El media query prefers-contrast indica que el usuario ha solicitado mas o menos contraste.
Utiliza el modificador contrast-more para agregar de manera condicional los estilos cuando el usuario solicite el modo de alto contraste.
Tailwind también incorpora el modificador contrast-less que es utilizado cuando el usuario no tiene activado el modo contraste en ON.
<div class="p-5 bg-white rounded-lg shadow-md">
<form>
<label class="block text-xl font-bold mb-1">Teléfono:</label>
<input
type="text"
class="border outline-none border-slate-500 mb-2 w-1/2 px-3 py-2"
/>
<p class="text-slate-200 contrast-more:text-slate-600">
Esta es la información de ayuda acerca del campo
</p>
</form>
</div>
Orientación del viewport
Los modificadores portrait (vertical) y landscape (horizontal) permiten agregar estilos en base a la orientación del dispositivo.
En el siguiente ejemplo vamos a mostrar un texto u otro dependiendo de la orientación del dispositivo.
<div class="p-10 bg-white">
<div class="portrait:hidden">Este contenido se ve en el modo vertical.</div>
<div class="landscape:hidden">
Este contenido se ve en el modo horizontal.
</div>
</div>
Estilos para impresión
El modificador print permite agregar estilos que son únicamente utilizados cuando se envía a impresión el contenido mostrado en pantalla.
<h1>Este es un título</h1>
<p class="print:hidden">Este es un parrado mostrado solo en pantalla</p>
<p class="hidden print:block">Este es un parrado mostrado solo en impresión</p>
Support
El modificador supports-[...] permite aplicar estilos cuando alguna funcionalidad especial es soportada por el navegador.