Come evidenziato nei precedenti capitoli di questa guida (“Come e dove dichiarare le media query”), in generale le media query possono essere dichiarate in tre modi differenti.

A seconda di come si intenda gestire questa dichiarazione, in Passweb sarà necessario agire in due modi diversi, che prevedono entrambi, l’utilizzo dei layout (oltre al fatto, chiaramente, di dover scrivere tutto il codice CSS necessario)

Nello specifico:

• nel caso in cui si dovesse decidere di creare uno o più fogli di stile (file .css) esterni in cui racchiudere tutte le regole CSS che dovranno essere applicate al verificarsi di specifiche condizioni, sarà poi necessario applicare la media query nel contesto dell’attributo media all’interno delle elemento < link > che identifica il file CSS da utilizzare.

ATTENZIONE! In queste condizioni non è sufficiente importare il file .css esterno tramite la sezione “Inclusione nella Pagina” perché questo tipo di inclusione non consente di gestire l’attributo media del relativo elemento < link >

Per risolvere il problema sarà quindi necessario utilizzare la sezione “Meta Tags” del layout, sezione questa che ci consente di gestire manualmente l’elemento < link > potendo inserire per esso tutti gli attributi necessari, compreso ovviamente l’attributo media.

Nell’ esempio riportato in figura il file colore.css viene caricato nelle pagine associate al layout in esame solo ed esclusivamente nel momento in cui il sito viene visitato da dispositivi in cui l’area di visualizzazione del documento (viewport) è compresa tra i 400 e i 1024 pixel

• nel caso in cui si desideri impostare una query mediante le direttive @media o @import, il relativo codice necessario dovrà essere inserito direttamente all’interno della sezione CSS del layout di pagina / sito

Per maggiori informazioni in merito alla gestione dei layout Passweb si veda anche la sezione “Live Editing – Layout” del manuale di prodotto