Tramite l'utilizzo di questa caratteristica è possibile per esempio ingrandire o ridurre le dinemsioni di un testo. Questo è uno dei metodi per creare un template con grafica responsive, dove nel file css sono specificati alcuni stili che vengono richiamati quando la risoluzione è più o meno grande a seconda delle necessità.
Per fare un esempio, se vogliamo che sotto una certa dimensione dello schermo, un elemento acquisisca una determinata proprietà, possiamo procedere come segue:
@media screen and (max-width: 640px) {
div.esempio { border: 1px solid red; }
}
Analizzando adesso quanto scritto sopra, possiamo vedere che andremo ad assegnare un bordo rosso al div con classe esempio solamente quando la risoluzione dello schermo è minore di 640 pixel. Con la dicitura @media screen il foglio di stile comunica che le informazioni contenute all'interno dell'eccezione sono relative solo alla visualizzazione su di uno schermo, in seguito con le istruzioni contenute tra parentesi tonde max-width: 640px possiamo scegliere il parametro che fungerà da filtro per assegnare o meno lo stile desiderato; qui è possibile inserire anche più di un parametro, indicandolo ogni volta tra parentesi tonde ed aggiungendo un and dopo ciascuno di essi; in questo modo possiamo creare un filtro che va da un minimo ad un massimo, senza curarci di cosa succederà prima o dopo rispetto ai parametri inseriti (ad esempio la visualizzazione su di un tablet, inizierà dopo la visualizzazione su smartphone e finirà prima della visualizzazione su desktop).
Dopo un po' di pratica sarà semplice creare degli elementi nella pagina che cambiano le loro dimensioni in funzione della risoluzione in larghezza del dispositivo con cui si naviga il sito web. In altri articoli che verranno pubblicati in seguito analizzeremo come fare la stessa cosa in funzione della risoluzione in altezza di uno schermo.
