Cómo usar los puntos de interrupción de CSS para crear diseños receptivos

El éxito de un sitio web depende mucho de la experiencia del usuario. En estos días, los usuarios acceden a un sitio web desde muchos dispositivos diferentes, y brindar una experiencia de usuario igual en todos los dispositivos puede ser un desafío. Ahí es donde los puntos de interrupción de CSS pueden ser útiles.

Los puntos de interrupción de CSS pueden ser muy beneficiosos para crear sitios receptivos que brinden una excelente experiencia de usuario en cualquier dispositivo, pero también siguen siendo uno de los aspectos más confusos del diseño web, especialmente para los nuevos desarrolladores.

¡Empecemos!

¿Qué es un punto de interrupción de CSS?

Los puntos de interrupción de CSS son puntos en los que el contenido del sitio web responde de acuerdo con el ancho del dispositivo, lo que le permite mostrar el mejor diseño posible al usuario.

Los puntos de interrupción de CSS también se denominan puntos de interrupción de consulta de medios, ya que se usan con la consulta de medios.

En este ejemplo, puede ver cómo el diseño se adapta al tamaño de la pantalla. El diseño a gran resolución tiene un encabezado y un diseño de cuerpo de dos columnas, pero en un dispositivo pequeño se convierte en un diseño de una columna.

Cómo establecer puntos de interrupción de CSS

La parte difícil es decidir los puntos de interrupción en sí mismos. No hay plantillas estándar y diferentes marcos usan diferentes puntos de interrupción.

Entonces, ¿qué enfoque debería adoptar para sus puntos de interrupción?

Hay dos enfoques probables a seguir:

• Puntos de interrupción basados ​​en el dispositivo
• Puntos de interrupción basados ​​en el contenido

Puntos de interrupción de CSS basados ​​en el dispositivo

Decidir puntos de interrupción basados ​​en diferentes dispositivos suena como una buena idea, pero en realidad, no siempre es el mejor enfoque. Ya tenemos suficientes dispositivos de los que preocuparnos, y cuando aparece uno nuevo con un ancho diferente, volver a su CSS y agregar un nuevo punto de interrupción lleva mucho tiempo.

No obstante, sigue siendo una opción viable, ya que puede encontrar que funciona bien para usted. Este es un ejemplo de puntos de interrupción específicos del dispositivo:

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

Con este enfoque, terminará teniendo una enorme lista de consultas de medios.

Puntos de interrupción de CSS basados ​​en el contenido

La opción ideal para decidir puntos de interrupción se basa en el contenido de su sitio. Este método le permite simplemente agregar puntos de interrupción donde su contenido necesita un ajuste de diseño. Esto hará que su consulta de medios sea mucho más simple y manejable.

Este punto de interrupción significa que el CSS se aplicará cuando el ancho del dispositivo sea de 768 píxeles o más.

 [css]@media only screen (min-width: 768px){ ... }[/css]

También puede establecer un rango con puntos de interrupción, por lo que el CSS solo se aplicará dentro de esos límites.

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

Cuándo usar puntos de interrupción de CSS de ancho mínimo o máximo

Puede establecer sus puntos de interrupción de diferentes maneras usando min-width , max-width o incluso combinando ambos. Pero la pregunta es, ¿cuándo debes usar cada uno?

Para responderlo de una manera simple, si está diseñando su diseño con un enfoque móvil primero, use puntos de interrupción de ancho mínimo y avance.

Establezca sus estilos predeterminados para el dispositivo pequeño y solo ajústelos para dispositivos más grandes en consecuencia.

Del mismo modo, si está diseñando primero para dispositivos más grandes, configure su CSS predeterminado como lo haría normalmente y ajústelo para dispositivos más pequeños con el enfoque de ancho máximo.

Uso de puntos de interrupción de CSS con SASS

Si está utilizando un preprocesador como SASS o SCSS, puede escribir puntos de interrupción mucho más inteligentes. Mixin le permite crear más puntos de interrupción declarativos para recordar, como este:

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

Al trabajar en grupo, es mucho más fácil recordar "tablet-up" que 768px o 48em. Cualquiera puede entender este punto de ruptura; es para tabletas y tamaños de pantalla superiores.

Qué puntos de interrupción de CSS usar

Hemos visto cómo usar los puntos de interrupción y cuándo usarlos, pero la pregunta sigue siendo: ¿qué puntos de interrupción específicos debe usar?

Analicemos un poco las cosas. Debe orientar los anuncios a tamaños para computadoras de escritorio, tabletas y solo para dispositivos móviles. Puede consultar algunos marcos populares para tener una idea de qué enfoque seguir.

Bootstrap tiene puntos de interrupción en 576 px, 768 px, 992 px y 1200 px. Foundation tiene principalmente puntos de interrupción en 40em y 64em. En Bulma, los puntos de interrupción se establecen en 768 px, 769 px, 1024 px, 1216 px y 1408 px.

Cada uno tiene diferentes puntos de interrupción, pero una cosa que tienen en común es un enfoque móvil primero. Puede usar uno de estos puntos de interrupción como punto de partida o puede crear uno propio, como este:

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

¡Entiendes la idea!

Terminando

En resumen, los puntos de interrupción de CSS son una excelente manera de reestructurar su diseño para brindar la mejor experiencia de usuario en diferentes dispositivos.

Intente siempre crear puntos de interrupción basados ​​en su propio contenido, no en dispositivos. Divídalos a un ancho lógico en lugar de un ancho aleatorio y manténgalos en un número manejable, por lo que la modificación sigue siendo simple y clara.

¿Qué puntos de interrupción de CSS usas para tus diseños? Háganos saber en la sección de comentarios a continuación.

¿Que sigue?

¡Cree y pruebe sus bloques de Gutenberg personalizados con Local de forma gratuita!

¡Aprenda más sobre Local aquí!

Para obtener más consejos sobre la creación de sitios receptivos, consulte estos artículos.

• Cómo hacer que su sitio de WordPress sea compatible con dispositivos móviles
• Cómo crear un menú de navegación receptivo en WordPress
• 7 consejos de mejores prácticas para el diseño web receptivo