Creare le Media Query con CSS3
Le Media Queries (conosciute anche come Media Query) sono dichiarazioni CSS che permettono di identificare il tipo di dispositivo o una sua caratteristica allo scopo di applicare stili o condizioni differenti in base ad un elenco di regole.
Per esempio, grazie alle media query è possibile intercettare il momento in cui il nostro browser consulta la pagina per mandarla in stampa. Una particolare dichiarazione applicata ad una media query, permetterà di rimuovere immagini, colori di sfondo, che andrebbero semplicemente a far sprecare l’inchiostro del nostro visitatore. Per le loro caratteristiche sono uno strumento molto utilizzato quando si sviluppa in ottica Responsive.
Il responsive web design mira ad adattare la visualizzazione di una pagina web al rispettivo dispositivo nel miglior modo possibile. Le media query sono usate per interrogare varie proprietà del dispositivo di visualizzazione, le cosiddette media feature. È possibile definire regole di stile per diverse dimensioni dello schermo e addirittura ottimizzare lo stile nel caso in cui un dispositivo mobile sia posto in posizione orizzontale (landscape).
Struttura sintattica della media query
Immagina il titolo principale di una pagina web per il quale è stata impostata la seguente regola:
h1 {
font-size: 24px;
line-height: 1.25;
}
Definiamo una media query che interroga la larghezza dello schermo e qualora questo fosse largo minimo 1024px, porterebbe la dimensione del font per i titoli h1 a 36px.
@media screen and (min-width: 1024px) {
h1 {
font-size: 36px;
}}
Analizziamo il codice:
- @media identifica una media query
- screen identifica a cosa deve essere applicata. Questo valore può essere:
- all (Per qualsiasi supporto di output)
- screen(Visualizzazione del contenuto)
- print (Stampa del contenuto)
- speech (Lettura ad alta voce del contenuto di una pagina web tramite un sintetizzatore vocale)
- operatore and e tra parentesi tonda indichiamo a quale breakpoint o particolare condizione deve intervenire la media query. Le possibili varianti sono:
- width (min-width , max-width) Interroga la larghezza dello schermo in pixel
- height (min-height, max-heigth) Interroga l’altezza dello schermo in pixel
- orientation (orientamento) Rileva l’orientamento dello schermo in formato verticale/orizzontale
- resolution (risoluzione) Rileva la risoluzione dello schermo disponibile
Se vogliamo far funzionare la precedente media query per una dimensioni della finestra tra 1024px e 1380px dobbiamo modificare la regola specificando il range :
@media screen and (min-width: 1024px) and (max-width:1380px {…
Dopo la parentesi graffa inseriamo tutte le regole che devono funzionare o che devono sovrascrivere regole precedentemente dichiarate, quando si raggiunge il breakpoint. Affinché la larghezza di viewport corrisponda effettivamente alla larghezza dello schermo, è necessario inserire l’indicazione ‘meta-viewport’ nella sezione 'head' dei file html. In assenza di questa indicazione, la pagina sarà visualizzata sui dispositivi mobili come se fosse su desktop, ma nel complesso con dimensioni estremamente ridotte:
meta name=”viewport” content=”width=device-width, initial-scale=1″
Per provare il corretto funzionamento della media query creata basta lanciare il file html contenete un tag 'h1', il meta tag viewport e il collegamento al file CSS contenete le regole e ridurre la dimensione della finestra del browser oppure utilizzare le funzionalità del pannello Ispeziona del browser.
- Team Logicabit -
