4.1 Concetti di base
Le variabili CSS e i media query offrono strumenti potenti per creare un design web adattivo che si adatta automaticamente a diverse dimensioni di schermo e dispositivi. Le variabili permettono di gestire centralmente gli stili, mentre i media query permettono di modificare questi stili a seconda delle condizioni, come la larghezza dello schermo.
Concetti di base
- Variabili CSS: permettono di definire valori che si possono riutilizzare in tutto il codice CSS. Possono essere cambiate in vari contesti, come i media query, rendendole particolarmente utili per il design adattivo.
- Media query: permettono di applicare stili CSS basati sulle caratteristiche del dispositivo, come la larghezza o l'altezza dello schermo. Questo permette di adattare l'aspetto e il comportamento della pagina web per diversi dispositivi.
Utilizzo delle variabili nei media query
Le variabili CSS possono essere utilizzate all'interno dei media query per cambiare i valori degli stili in base alle condizioni. Questo permette di creare design adattivi più flessibili e facilmente manutenibili.
Esempio di utilizzo delle variabili nei media query:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
@media (max-width: 600px) {
:root {
--main-bg-color: #e0e0e0;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--main-bg-color: #d0d0d0;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--main-bg-color: #f0f0f0;
--font-size: 16px;
}
}<body>
<p>Questo è un paragrafo con un link a <a href="#">Example.com</a>.</p>
</body>Spiegazione:
In questo esempio, i valori delle variabili cambiano in base alla larghezza dello schermo:
- Per gli schermi larghi fino a 600px il background diventa di una tonalità più scura e la dimensione del font si riduce.
- Per gli schermi larghi da 601px a 1200px il background cambia in una tonalità media e la dimensione del font si ingrandisce leggermente.
- Per gli schermi larghi più di 1200px vengono applicati i valori originali delle variabili.
4.2 Esempi di variabili nei media query
Esempio 1: Margini adattivi e dimensioni dei font
:root {
--padding: 20px;
--font-size: 16px;
}
.container {
padding: var(--padding);
font-size: var(--font-size);
}
@media (max-width: 600px) {
:root {
--padding: 10px;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--padding: 15px;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--padding: 20px;
--font-size: 16px;
}
}<div class="container">
<p>Questo è un contenitore responsivo con padding e dimensione del font adattivi.</p>
</div>Spiegazione:
- In questo esempio il contenitore
.containercambia i suoi margini e la dimensione del font in base alla larghezza dello schermo
Esempio 2: Tematizzazione del sito usando variabili e media query
:root {
--bg-color: #ffffff;
--text-color: #000000;
--link-color: #3498db;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #9b59b6;
}
}<body>
<p>Questo testo e il link si adatteranno al tema colore preferito dall'utente. Visita <a href="#">Example.com</a>.</p>
</body>Spiegazione:
- In questo esempio il sito cambia schema di colori in base alle preferenze dell'utente (
prefers-color-scheme: dark). Il colore del fondo, del testo e dei link vengono modificati automaticamente quando si passa tra il tema chiaro e scuro
4.3 Griglia adattiva
Esempio di utilizzo di variabili e media query per una griglia adattiva:
:root {
--columns: 1fr;
--gap: 10px;
}
.grid-container {
display: grid;
grid-template-columns: var(--columns);
gap: var(--gap);
}
@media (min-width: 600px) {
:root {
--columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
:root {
--columns: 1fr 1fr 1fr;
}
}<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>Spiegazione:
- In questo esempio viene utilizzata una griglia adattiva che cambia il numero di colonne a seconda della larghezza dello schermo. Su schermi stretti (fino a 600px) la griglia ha una colonna, su schermi medi (da 600px a 900px) due colonne, e su schermi larghi (più di 900px) tre colonne