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.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire una query su SQL Azure tramite un workflow di GitHub
Creazione di componenti personalizzati in React.js con Tailwind CSS
Assegnare un valore di default a un parametro di una lambda in C#
Generare file per il download da Blazor WebAssembly
Gestione degli environment per il deploy con un workflow di GitHub
Utilizzare database e servizi con gli add-on di Container App
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Creare gruppi di client per Event Grid MQTT
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Aggiungere interattività lato server in Blazor 8
Sfruttare lo stream rendering per le pagine statiche di Blazor 8