CONTATTACI

Guide per aspiranti programmatori

Lezione 30 / 30

Media Query

Parlandoti del flexbox ti abbiamo illustrato un concetto fondamentale nella progettazione di un sito web; prima ancora di iniziare a scrivere codice per creare un sito web, infatti, devi curarne la progettazione con minuzia. Per questo abbiamo introdotto, nella scorsa guida, il concetto di progettazione “mobile-first”.
Non te lo ricordi? Tranquillo, lo rispolveriamo velocemente.

Progettare un sito web seguendo i precetti del “mobile-first” significa che la prima cosa da concepire quando strutturi il layout del tuo sito è che questo venga visualizzato dallo schermo di un cellulare. Questo perché, ribadiamo nuovamente, il maggior traffico su di un sito web avviene, ad oggi, da telefono, quindi “da mobile”.
Progetterai, quindi, il tuo layout in primo luogo fruibile da uno schermo più piccolo, e via,via, da schermi di altri dispositivi più grandi, fino a giungere alla visualizzazione da desktop, ovvero da pc.

A questo punto potresti sentirti un pò disorientato: staremo, forse, dicendo che devi scrivere fogli di codice diversi per le diverse dimensioni degli schermi dei dispositivi dai quali si accede al tuo sito web? È follia!
Non scoraggiarti. Esiste un modo più smart per adattare il tuo layout e il tuo codice alle diverse dimensioni di cui sopra. Stiamo parlando delle MEDIA QUERIES.

Che cos è una media query?

Una media query è una parte di codice composta dalla dichiarazione di una tipologia di media, appunto, con la sua dimensione in pixel specificata e di espressioni – a seguire – che accertino la validità delle caratteristiche di quel media.
Difficile? Non dirlo neppure! Osserviamone la sintassi cosicché eventuali dubbi svaniscano.

Media query: la sintassi.

Supponiamo di aver creato il nostro bel layout da mobile.
Per semplificare il concetto all’estremo la caratteristica che prenderemo in analisi sarà il colore di sfondo del nostro sito.
Quindi, da cellulare abbiamo uno sfondo blu. Per gli altri dispositivi, però, per assurdo, siamo ossessionati dall’idea di modificare il colore di questo sfondo e renderlo verde.
Ragioniamo un attimo. 

Possiamo considerare “mobile” i dispositivi fino ad un’ampiezza (una width, quindi) di 576px.
Noi vogliamo agire sugli schermi dei dispositivi più grandi di quella larghezza.

Quindi, riprendendo la definizione di cui sopra, il media sul quale agiremo sarà lo schermo del dispositivo. Dovremo, quindi, indicare il tipo di media e le sue dimensioni per far capire al browser come agire. 
Ne consegue, che la sintassi sarà la seguente.

Regola principale – da mobile :

.background-color {
   background-color: blue;
}

Media query per cambiare il colore di sfondo:

@media screen and (min-width:576px) {
   .background-color {
      background-color: green;
   }
}

Come vedi, abbiamo la dichiarazione della media query, con specificato il tipo di media e l’ampiezza minima (o massima, a seconda di ciò su cui vogliamo agire) seguita dal selettore che ci occorre (qui la classe .background color) a cui modificare gli attributi css desiderati (in questo caso, il colore di sfondo)

Più semplice a farsi che a dirsi, vero?

Le media queries vanno introdotte nel nostro foglio di codice o inserendole alla fine del foglio CSS, per ultime, oppure su un foglio CSS a parte che andremo poi a linkare nell’head del nostro documento html.
Ricorda di inserirle secondo un ordine ben preciso, poiché proprio per il principio dello stile a cascata di cui sopra, un ordine scorretto potrebbe far si che una si sovrascriva ad un’altra, non facendo funzionare le istruzioni che desideri.

Con questo strumento, dunque, potrai modificare il tuo codice in maniera facile e veloce, rendendolo differente da qualsiasi dispositivo tu voglia. Ne cogli la potenza?

Termina qui la nostra guida all’apprendimento di html e css, ma non ti lasciamo solo: potrai esercitarti con i nostri esercizi css

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 187 €/mese.

Esempio di finanziamento  

Importo finanziato: € 3990 in 24 rate da € 187 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 4572.88.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.