¿Cómo hago para que el código siempre responda a los cambios en el tamaño de la pantalla?
Recuerdo que hay un globalEventHandler que puede hacer esto, pero no estoy seguro de cuál...
Por ejemplo, el div #test-02 siempre ajustará automáticamente su ancho a 1/3 del div #test-01 . El problema es que a medida que usamos la herramienta de desarrollo (f12) para cambiar el tamaño de la ventana, el ancho de div #test-01 sigue cambiando pero el código ya no responde... a menos que volvamos a cargar la página...
const test01 = document.querySelector('#test-01'); const test02 = document.querySelector('#test-02'); const data = test01.getBoundingClientRect().width; test02.style.width = `${data / 3}px`; #test-01 { width: 100vw; height: 50vh; background-color: grey; display: flex; justify-content: center; align-items: center; } #test-02 { height: 100%; background-color: orange; } <div id="test-01"> <div id="test-02"></div> </div>Para escuchar los cambios en la pantalla de la ventana, puede usar
window.addEventListener("resize", callback)Esto escuchará los eventos de cambio de tamaño en la ventana y ejecutará la función de devolución de llamada si ocurre tal evento. Por lo tanto, podría poner el código que cambia el tamaño de sus elementos entre sí en la devolución de llamada, de modo que se ejecute en cada cambio de tamaño de ventana. (La devolución de llamada no se ejecutará al cargar la página, por lo que también deberá ejecutar su código fuera del controlador de eventos una vez).
El siguiente código debería funcionar en su caso:
const test01 = document.querySelector('#test-01'); const test02 = document.querySelector('#test-02'); function onResize() { const data = test01.getBoundingClientRect().width; test02.style.width = `${data / 3}px`; } window.addEventListener("resize", onResize, {passive: true}) onResize()