Media Queries

Disponibile

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 screen
  • media-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.
CSS
@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:

CSS
/* 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:

CSS
/* 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:

CSS
/* 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:

CSS
/* 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:

CSS
/* 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:

CSS
/* Applicare stili solo per gli schermi */

@media only screen and (max-width: 768px) {
  .menu {
    display: none;
  }
}
1
Compito
Frontend SELF IT,  livello 25lezione 1
Bloccato
Media Queries di Larghezza
Media Queries di Larghezza
1
Compito
Frontend SELF IT,  livello 25lezione 1
Bloccato
Orientamento schermo
Orientamento schermo
Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti