Qué es un breakpoint
Explicado de una forma rápida y directa, un breakpoint, es el ancho de un dispositivo en el cual queremos que la forma en la que mostramos nuestro contenido con CSS cambie.
Es la forma en la que adaptamos nuestros proyectos web a diferentes pantallas y dispositivos. Lo que se vino a llamar en su momento el «responsive design«.
No es más que aplicar diferentes reglas y estilos CSS cuando el ancho del dispositivo donde se muestra nuestra web es de una cantidad determinada de píxeles.
Cómo aplicar los breakpoints
Aplicar un breakpoint es tan sencillo como especificar reglas CSS para una cantidad de píxeles «menos que«. Hay muchas formas de aplicar breakpoints pero yo te recomiendo que uses siempre un mismo criterio.
p {
font-size: 18px;
}
@media (min-width: 640px){
p {
font-size: 14px;
}
}
En este ejemplo concreto estamos especificando lo siguiente: «en general, el tamaño de mis párrafos es de 18px, pero si el dispositivo donde se muestra el contenido tiene un ancho menor a 640px, usaremos un párrafo con 14 px de tamaño.»
Breakpoints más frecuentes
Ese valor, esa cantidad de píxeles la tenemos que determinar nosotros. Y aquí tenemos un pequeño problema. Por que en el mercado existen multitud de resoluciones diferentes que hacen bastante complejo especificar un breakpoint concreto que cubre a todos los dispositivos móviles, teniendo en cuenta también que el contenido podemos mostrarlo en horizontal y en vertical, lo que se llama en «portrait» y «landscape«. Además, el mercado móvil incluye tablets donde nuestro contenido puede ser consumido de forma horizontal y vertical.
Aquí te dejo mi consejo desde la experiencia, en cuanto a qué breakpoints usar en tus proyectos:
- 640px: con este breakpoint podemos preparar nuestro contenido para móviles, tanto en portrait como en landscape, como tablets en portrait.
- 900px: con este breakpoint cubrimos tablets en horizontal o landscape, así como ventanas de navegador con poco ancho.
- 1800px: para crear disposiciones específicas en pantallas muy grandes.
Te dejo un ejemplo aquí para que puedas copiar y pegar en tu proyecto:
@media (min-width: 640px){
...
}
@media (min-width: 900px){
...
}
@media (min-width: 1800px){
...
}