2.1 Fondamenti di Media Queries
Le Media Queries sono uno degli strumenti fondamentali per creare siti web reattivi. Con il loro aiuto, puoi adattare gli stili per diversi dispositivi e dimensioni dello schermo, garantendo una visualizzazione ottimale e facilità d'uso. Di seguito esamineremo le basi dell'uso delle media queries, la loro sintassi, e esempi di adattamento degli stili per diversi schermi.
Le Media Queries utilizzano la regola @media, che consente di applicare determinati stili solo quando vengono soddisfatte
determinate condizioni. Le condizioni possono includere dimensioni dello schermo, risoluzione, orientamento e altri parametri.
Sintassi:
@media media-type and (media-feature) {
/* stili */
}
Dove:
media-type: il tipo di media per cui verranno applicati gli stili. La maggior parte delle volte si utilizza screenmedia-feature: caratteristiche dei media, come larghezza, altezza, orientamento, ecc.
Esempio:
- In questo esempio, lo sfondo della pagina diventerà azzurro chiaro se la larghezza dello schermo non supera i 768 pixel.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 Tipi di Media Queries
1. Queries per larghezza e altezza
Queste media queries ti permettono di modificare gli stili in base alla larghezza e all'altezza della finestra di visualizzazione.
Esempi:
/* Applicare stili se la larghezza dello schermo è minore o uguale a 768px */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* Applicare stili se l'altezza dello schermo è maggiore di 800px */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. Orientamento (orientation)
Le queries per l'orientamento dello schermo consentono di adattare gli stili a seconda se il dispositivo è in modalità ritratto (portrait) o paesaggio (landscape).
Esempi:
/* Applicare stili per l'orientamento verticale */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* Applicare stili per l'orientamento orizzontale */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. Densità dei pixel (resolution)
Le media queries relative alla densità dei pixel consentono di adattare gli stili per dispositivi con diverse densità di pixel, come gli schermi Retina.
Esempi:
/* Applicare stili per schermi con densità di pixel di 2x e superiore */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* Applicare stili per schermi con densità di pixel inferiore a 2x */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 Combinazione di Media Queries
Le media queries possono essere combinate utilizzando gli operatori logici and, not e only.
Esempi
Utilizzo dell'operatore and:
/* Applicare stili per dispositivi con larghezza schermo tra 600px e 1200px */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
Utilizzo dell'operatore not:
/* Applicare stili per tutti i dispositivi, tranne quelli con larghezza schermo inferiore a 600px */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
Utilizzo dell'operatore only:
/* Applicare stili solo per gli schermi */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION