Puntos de interrupción en consultas de medios CSS | Explicado
Introducción a los puntos de interrupción de CSS
Los puntos de interrupción en CSS se conocen como aquellos puntos en los que el diseño de un sitio web altera correspondiente al tamaño de la pantalla del tipo de dispositivo. Estos puntos también se consideran como puntos de interrupción de la consulta de medios porque se especifican en consultas de medios.
Ahora que hemos aprendido qué son los puntos de interrupción de la consulta de medios, exploremos cómo configurarlos.
Configuración de puntos de interrupción de CSS
No se proporciona un estándar para establecer un punto de interrupción, por lo tanto, los puntos de interrupción definidos en varias estructuras web pueden diferir. Sin embargo, se nos ha proporcionado dos tipos de enfoques para establecer un punto de interrupción.
1. Puntos de interrupción de tipo de dispositivo
2. Puntos de interrupción de tipo de contenido
Veamos en detalle.
Puntos de interrupción de tipo de dispositivo
Como su nombre indica, los puntos de interrupción del tipo de dispositivo se consideran el procedimiento de especificar puntos de interrupción en función de diferentes tipos de dispositivos. Aunque, esto podría no considerarse como un buen enfoque porque la tecnología está evolucionando por minuto y surgen nuevos dispositivos de vez en cuando. Por lo tanto, cada vez que emerge un nuevo dispositivo, los desarrolladores deben especificar un punto de interrupción para ese dispositivo en particular que puede ser agitado.
Además, la lista de consultas de medios es enorme al definir puntos de interrupción de acuerdo con el tipo de dispositivo. Diferentes dispositivos sobre la base de los cuales puedes decidir los puntos de interrupción son los siguientes.
1. Escritorios
2. Tabletas
3. Teléfonos móviles
Aquí hemos presentado algunos ejemplos de puntos de interrupción basados en dispositivos.
Para iPhone 13
@Media Only Screen y (ancho del dispositivo: 1170px) y (dispositivo de dispositivo: 2532px)…
Para Samsung Galaxy S9+
@Media Only Screen y (ancho del dispositivo: 1440px) y (dispositivo de dispositivo: 2960px)…
En lugar de especificar los puntos de interrupción de cada dispositivo por separado, también puede definir puntos de interrupción para grupos de dispositivos comunes.
/ * Para dispositivos muy pequeños (486px y abajo) */@Media Only Screen y (Max-Width: 486px) ...
/ * Para dispositivos pequeños (596px y arriba) */
@Media solo pantalla y (Min-Width: 596px) ...
/ * Para dispositivos medios (720px y arriba) */
@Media solo pantalla y (Min-Width: 720px) ...
/ * Para dispositivos grandes (995px y arriba) */
@Media Solo pantalla y (Min-Width: 995px) ...
/ * Para dispositivos extra grandes (1100px y arriba) */
@Media solo pantalla y (Min-Width: 1100px) ...
Puntos de interrupción de tipo de contenido
Especificar puntos de interrupción basado en el tipo de contenido que muestra su sitio web, se utilizan los puntos de interrupción del tipo de contenido. Este se considera un buen enfoque porque este enfoque requiere que especifique los puntos de interrupción solo en aquellos puntos donde el contenido necesita cualquier tipo de reajuste. El uso de este enfoque, el número de consultas de los medios se vuelve cada vez más manejable.
Algunos puntos de interrupción de tipo de contenido de muestra se proporcionan a continuación.
Para ancho de pantalla 720px y más amplio.
@Media Solo pantalla y (Min-Width: 720px)…
Para resolución de pantalla entre 480px y 720px.
@Media Only Screen y (Min-Width: 480px) y (Max-Width: 720px)…
Usando puntos de interrupción de ancho de ancho Min y máximo en los lugares correctos
En los ejemplos anteriores, debe haber notado que hemos usado dos tipos de puntos de interrupción que son de ancho mínimo y máximo ancho. Debe surgir una pregunta en su mente cuál usar cuando.
La respuesta a esta pregunta es simple: si está desarrollando su sitio web para dispositivos más pequeños primero, establezca sus puntos de interrupción CSS predeterminados con MIN-Width y ajuste para dispositivos más grandes en consecuencia. Mientras tanto, lo contrario es el caso de los dispositivos más grandes. Si primero se está desarrollando para dispositivos más grandes, use el ancho máximo y luego sintonice para dispositivos más pequeños en consecuencia.
Tipos de puntos de interrupción utilizados
Cuando el mercado del tipo de dispositivo no era tan grande como ahora, entonces el ancho de la pantalla para cada dispositivo se especificó por separado, sin embargo, este enfoque no se recomienda ahora, ya que hay una amplia gama de tipos de dispositivos en el mercado.
El enfoque que se prefiere es que debe conocer el tipo de diseño de su web, su público objetivo y el tipo de dispositivos que su audiencia usa principalmente y el ancho de la pantalla de esos dispositivos. Aquí hemos alistado algunos puntos de interrupción frecuentes utilizados.
1. Para dispositivos móviles: 320px a 480px
2. Para tabletas y iPads: 481px a 768px
3. Para computadoras portátiles: 769px a 1024px
4. Para escritorios: 1025px a 1200px
Conclusión
Los puntos de interrupción en CSS se conocen como aquellos puntos en los que el diseño de un sitio web altera correspondiente al tamaño de la pantalla del tipo de dispositivo. Hay dos tipos de puntos de interrupción, uno que se especifica sobre la base del tipo de dispositivo y el otro se definen sobre la base del tipo de contenido. El enfoque que usa el tipo de contenido se prefiere a través del tipo de dispositivo, ya que hay una amplia gama de dispositivos disponibles en el mercado y se hace difícil especificar los puntos de interrupción para cada dispositivo individualmente. Aunque, hay ciertos puntos de interrupción comunes utilizados para varios dispositivos que hemos discutido en detalle en este artículo junto con otros detalles sobre los puntos de interrupción.