Puntos de ruptura CSS

Al utilizar diseños predeterminados, el sistema aplicará diferentes puntos de ruptura al cambiar entre móvil, tableta y ordenador. Los puntos de ruptura son:

Mínimo

  • Tamaño de pantalla inferior a 321 píxeles de ancho o 321 píxeles de alto
  • El tamaño de la fuente se ajusta a 0,38.
  • La altura de línea se ajusta a 1,05 em.
  • El relleno del cuadro se reduce a 5 píxeles
  • Tamaño de pantalla inferior a 450×450: el recuadro se redimensiona al 100 % x 100 %.

Móvil: Vertical

  • Tamaño de pantalla inferior a 480 píxeles de ancho y 926 píxeles de alto
  • Ancho del recuadro ampliado al 100 % y altura mínima de 300 píxeles
  • Los botones se colocan debajo del contenido
  • El logotipo está oculto
  • Se ha reducido el relleno
  • Adicional: Si el tamaño de la pantalla es inferior a 414×736 o 736×414 (p. ej., iPhone 6/7/8), se reduce el relleno del recuadro.

Móvil: horizontal

  • Tamaño de pantalla inferior a 926 píxeles de ancho y 480 píxeles de alto
  • Ancho del cuadro ampliado al 100 % y altura mínima de 150 píxeles
  • Los botones se colocan a la derecha del contenido con un ancho de 250 píxeles.
  • El logotipo está oculto
  • Se ha reducido el relleno
  • Adicional: Si el tamaño de la pantalla es inferior a 414×736 o 736×414 (p. ej., iPhone 6/7/8), se reduce el relleno del recuadro

Ordenador y tableta

  • Tamaño de pantalla superior a 926×480 o 480×926

Consultas de medios adicionales

Capas posicionadas como «parte inferior/ancho completo», «parte superior/ancho completo» y «Desplazar hacia abajo»:

  • Ancho máximo 1500 px: el contenido (título, texto y finalidades) de la capa de consentimiento se reducirá a «100 % – 450 px» para poder mostrar los botones a la derecha del contenido.
  • Ancho máximo 1200 píxeles: el contenido (título, texto y fines) de la capa de consentimiento se reducirá a «100 % – 250 píxeles» para poder mostrar los botones a la derecha del contenido. Esto
  • Ancho máximo 800 píxeles: el contenido (título, texto y finalidades) de la capa de consentimiento se ampliará al 100 % para mostrar los botones debajo del contenido.

Capas situadas en «abajo/derecha», «abajo/centro», «centro/centro» y «arriba/centro»:

  • Ancho máximo 600 píxeles: el cuadro se redimensiona al 100 % de ancho.

Capas colocadas en «medio/centro»:

  • Altura máxima de 600 píxeles y anchura mínima de 926 píxeles: el cuadro se redimensiona a altura completa y el contenido se configura como flex con overflow auto para evitar que el cuadro sea demasiado alto para la ventana.

Capas posicionadas como «derecha/altura completa» e «izquierda/altura completa»:

  • Ancho máximo 400 píxeles: el cuadro se redimensiona al 100 % de ancho.

Página de configuración personalizada:

  • Ancho máximo 570 píxeles: la navegación se ha desplazado a la parte superior para dejar suficiente espacio al contenido

 

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!