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
Creare due extension method per serializzare un oggetto in JSON e viceversa utilizzando la libreria System.Text.Json
Eseguire una chiamata asincrona durante la validazione di una form in Blazor
Eseguire lo shutdown pulito di un'applicazione ASP.NET Core
Creare applicazioni web native con Electron
Cambiare automaticamente lo stato di un work item in una pipeline di Azure DevOps
Portare un'applicazione Blazor WebAssmbly da static files a hosting in ASP.NET Core
Utilizzare EF Core Power Tools per effettuare il reverse engineer di un database
Tracciare il body delle richieste fallite con Application Insights in .NET Core
Cercare del testo con Azure Cosmos DB SQL
Mappare l'ereditarietà di una gerarchia di oggetti usando il TPT in Entity Framework Core 5
Inviare e-mail ai membri di un ruolo con Azure Monitor
Aggiungere una GIF in un'applicazione Xamarin Forms