¿Qué es el diseño responsivo?
El diseño responsivo, también conocido como diseño web adaptable, es una metodología esencial en el desarrollo web contemporáneo. Se trata de un enfoque de diseño que asegura que las páginas web se ajusten y se vean óptimas en una amplia variedad de dispositivos y tamaños de pantalla, desde ordenadores de escritorio hasta smartphones y tablets. Su objetivo principal es proporcionar una experiencia de usuario consistente y agradable, independientemente del dispositivo utilizado. Para lograrlo, el diseño responsivo utiliza técnicas como la adaptación de diseños, imágenes y tipografías, así como la reorganización de contenido, lo que garantiza que los sitios web sean accesibles y efectivos para un público diverso.
¿Qué son los breakpoints en CSS?
Los breakpoints en CSS son puntos específicos de ancho de pantalla en los que se aplican estilos de diseño responsivo. Estos puntos determinan cuándo se deben realizar cambios en la presentación de un sitio web para adaptarse a diferentes tamaños de pantalla. Los breakpoints se utilizan para optimizar la experiencia del usuario en dispositivos variados, como teléfonos móviles, tabletas y computadoras de escritorio. Al definir breakpoints y ajustar el diseño en consecuencia, los desarrolladores pueden garantizar que el contenido se muestre de manera legible y estéticamente agradable en una amplia gama de dispositivos, mejorando así la usabilidad y la accesibilidad de la página web.
¿Cómo se utilizan los breakpoints en Tailwind CSS?
Cada clase en Tailwind puede ser aplicada de manera condicional en diferentes breakpoints, lo que hace muy sencillo construir interfaces responsivas complejas directamente sobre HTML.
Existen cinco breakpoints por default, estos valores están inspirados en las resoluciones de dispositivo mas comunes.
| Breakpoints | Anchura Mínima | CSS |
|---|---|---|
| sm | 640 px | @media (min-width: 640px) { ... } |
| md | 768 px | @media (min-width: 768px) { ... } |
| lg | 1024 px | @media (min-width: 1024px) { ... } |
| xl | 1280 px | @media (min-width: 1280px) { ... } |
| 2xl | 1536 px | @media (min-width: 1536px) { ... } |
Para aplicar un breakpoint a una utilidad en tailwind, solo se necesita agregar el prefijo a la utilidad seguido de los dos puntos “:”.
<div class="hidden lg:block">
Mensaje visible a partir de los 1024px de anchura
</div>
En el siguiente ejemplo se muestra una plantilla que utiliza columnas con texto y una imagen y estas se ajustan de acuerdo a la resolución de la pantalla.
<div
class="mx-auto flex max-w-2xl flex-col rounded-lg bg-white p-5 shadow-lg sm:flex-row"
>
<img
src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Linux_logo.jpg"
class="max-h-[200px] object-cover object-top sm:object-scale-down"
/>
<div class="w-3/4 pl-5">
<h2 class="mb-3 mt-5 text-lg font-bold">
Lorem ipsum dolor sit amet consectetur
</h2>
<p class="mb-3">
Totam recusandae neque quis! Itaque minus beatae cum blanditiis
expedita a facilis obcaecati quo praesentium soluta. At minus
doloremque accusamus!
</p>
<p class="mb-3">
Quae a illo explicabo ducimus commodi sed enim necessitatibus
voluptatem officiis. Non itaque quo ipsa dicta sunt temporibus harum
ducimus?
</p>
</div>
</div>
¿Qué es el diseño Mobile-First?
Mobile-first es una estrategia de diseño web que comienza creando la versión móvil de un sitio web antes de adaptarlo a pantallas más grandes. Prioriza la experiencia en dispositivos móviles, promoviendo una carga más rápida y contenido más simple, y luego se expande para adaptarse a pantallas más grandes.
¿Cómo implementa Tailwind CSS Mobile-First?
Por default, Tailwind utiliza un sistema de diseño mobile-first similar a como otros frameworks como Bootstrap.
Lo que esto quiere decir es que con utilities sin prefijos (como uppercase) se aplican a todos los tamaños de pantalla, mientras que aquellos con prefijos (como md:uppercase) solo se aplican en a partir de una resolución.
Algo que suele confundir a los usuarios, es que el el prefijo
smno es el que debe utilizarse para móvil, sino la ausencia de cualquier prefijo, ya que sm indica un breakpoint (640px por default) a partir del cual se considera se hace uso de resoluciones pequeñas.
Utilizando un rango de breakpoints
Por default, los estilos como md:flex son aplicados mediante un breakpoint y se mantienen a través en las resoluciones mayores mientras otro breakpoint no los sobreescriba.
Tailwind tiene también un modificador max-* para cada uno de los breakpoints, si deseas aplicar un estilo solo a un rango de resoluciones puedes utilizar. Si deseas restringir el límite máximo para un estilo, puedes apilar dos modificadores.
Tailwind ofrece una lista de modificadores max-* para cada breakpoint modificador, esta es una lista de dichos modificadores.
| Breakpoints | Anchura Mínima | CSS |
|---|---|---|
| sm | 640 px | @media not all and (min-width: 640px) { ... } |
| md | 768 px | @media not all and (min-width: 768px) { ... } |
| lg | 1024 px | @media not all and (min-width: 1024px) { ... } |
| xl | 1280 px | @media not all and (min-width: 1280px) { ... } |
| 2xl | 1536 px | @media not all and (min-width: 1536px) { ... } |
En el siguiente ejemplo vamos a especificar que el texto se muestre en negritas desde sm (648px) hasta lg (1024px).
<div class="p-5 bg-white rounded-lg sm:max-lg:font-bold">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, ut?
</div>
Arbitrary Values (Valores Arbitrarios)
Si necesitas un breakpoint con un valor arbitrario, es decir que se aplique a una dimensión específica, puedes usar la sintaxis de paréntesis.
<div class="bg-white rounded-lg p-5">
<p class="min-[400px]:text-green-700 min-[800px]:text-purple-800">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid,
pariatur!
</p>
</div>