L'avvento dei dispositivi mobili con diversi form factor come smartphone e tablet ha obbligato il mondo del web a dotarsi di strumenti per visualizzare correttamente le pagine su ogni device. Tra questi strumenti, le media query rivestono un ruolo fondamentale in quanto permettono di specificare stili CSS in base alle dimensioni e alle capacità del device.
Sebbene le media query siano molto potenti, esistono casi in cui bisogna reagire non tanto al cambiamento delle dimensioni del browser, ma al cambiamento delle dimensioni di un singolo oggetto. Ad esempio, se diamo la possibilità all'utente di cambiare le dimensioni del font, automaticamente cambiano anche le dimensioni del suo contenitore e potremmo dover reagire a questo cambio adattando le dimensioni di altri oggetti o nascondendoli o altro ancora.

In questi casi l'evento resize dell'oggetto window non può aiutarci in quanto non viene scatenato. Tuttavia possiamo ricorrere all'utilizzo delle Resize Observer API che ci permettono di sottoscriverci al cambiamento di dimensioni di uno o più oggetti.

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    // codice
  }
});

resizeObserver.observe(document.querySelector('#mydiv'));

Come si vede dal codice, la classe ResizeObserver accetta in input nel costruttore un callback che viene invocato quando un oggetto viene ridimensionato dal browser. Successivamente, viene chiamato il metodo observe al quale viene passata la lista di oggetti di cui osservare le dimensioni.