gacor: Utilice ResizeObserver para diseños del tamaño de componentes

Un panel puede volverse estrecho porque su padre cambia, incluso cuando la ventana del navegador no lo hace. ResizeObserver informa cambios en el cuadro de contenido de un elemento, por lo que un componente reutilizable puede reaccionar a su propio espacio disponible.

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    entry.target.classList.toggle(
      "is-compact",
      entry.contentRect.width < 480,
    );
  }
});

observer.observe(card);

Observe sólo lo que necesita el componente.

• Cree un observador para elementos relacionados en lugar de uno por cada niño pequeño.
• Dejar de observar los elementos retirados o desconectar el observador cuando su dueño esté dispuesto.
• Utilice consultas de contenedor CSS cuando el cambio sea puramente visual y no necesite JavaScript.

Evite un ciclo de retroalimentación de cambio de tamaño

Cambiar las propias dimensiones del elemento observado en respuesta a cada medición puede desencadenar otra observación. Utilice umbrales estables y evite establecer un tamaño que oscile alrededor del umbral.

Pruebe con el componente dentro de contenedores estrechos y anchos, no solo cambiando el tamaño de la ventana completa del navegador.