Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Che cos'è il responsive web design? | Responsive Web Design in CSS
Tecniche CSS Avanzate

bookChe cos'è il responsive web design?

Non possiamo immaginare lo sviluppo web moderno senza design adattivi/responsivi. Questo consente agli utenti di utilizzare le risorse web in modo equivalente su qualsiasi dispositivo: uno smartphone, un tablet, un desktop o una TV.

Come funziona?

  1. Il team di sviluppo definisce l'aspetto di ogni elemento in base alla dimensione dello schermo;
  2. Imposta le istruzioni necessarie nel codice;
  3. Il browser monitora le modifiche della viewport;
  4. Il browser applica le regole definite dal team di sviluppo sotto forma di codice.

Media-query

Media-query è ciò che rende possibili i design adattivi/responsivi. Con l'aiuto di queste query, gli sviluppatori possono impostare gli stili di qualsiasi elemento in base alla dimensione dello schermo.

Nota

Possiamo considerare la media-query come istruzioni: "Se lo schermo dell'utente è un desktop, applica tali stili all'elemento. Se lo schermo dell'utente è uno smartphone, applica altri stili all'elemento. E così via.".

La sintassi di base della media-query è la seguente:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}
  1. <media_type> - dichiara il tipo di dispositivo. Valori possibili:
    • all - valore predefinito. Se non viene specificato nulla, la regola media funziona per tutti i dispositivi;
    • print - la regola media funziona per i dispositivi che producono documenti stampati, come le stampanti;
    • screen - la regola media funziona per tutti i dispositivi con schermo fisico.
  2. <media_feature> - dichiara le caratteristiche del dispositivo. Utilizzo più comune:
    • min-width: - la larghezza minima della viewport;
    • max-width: - la larghezza massima della viewport.
  3. <operator> - media-type e media-feature sono separati dall'operatore logico opzionale. I suoi valori possono essere: and oppure ,.

Nota

Nei capitoli successivi, verrà considerato l'utilizzo pratico delle media-query.

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 6. Capitolo 1

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 2.04

bookChe cos'è il responsive web design?

Scorri per mostrare il menu

Non possiamo immaginare lo sviluppo web moderno senza design adattivi/responsivi. Questo consente agli utenti di utilizzare le risorse web in modo equivalente su qualsiasi dispositivo: uno smartphone, un tablet, un desktop o una TV.

Come funziona?

  1. Il team di sviluppo definisce l'aspetto di ogni elemento in base alla dimensione dello schermo;
  2. Imposta le istruzioni necessarie nel codice;
  3. Il browser monitora le modifiche della viewport;
  4. Il browser applica le regole definite dal team di sviluppo sotto forma di codice.

Media-query

Media-query è ciò che rende possibili i design adattivi/responsivi. Con l'aiuto di queste query, gli sviluppatori possono impostare gli stili di qualsiasi elemento in base alla dimensione dello schermo.

Nota

Possiamo considerare la media-query come istruzioni: "Se lo schermo dell'utente è un desktop, applica tali stili all'elemento. Se lo schermo dell'utente è uno smartphone, applica altri stili all'elemento. E così via.".

La sintassi di base della media-query è la seguente:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}
  1. <media_type> - dichiara il tipo di dispositivo. Valori possibili:
    • all - valore predefinito. Se non viene specificato nulla, la regola media funziona per tutti i dispositivi;
    • print - la regola media funziona per i dispositivi che producono documenti stampati, come le stampanti;
    • screen - la regola media funziona per tutti i dispositivi con schermo fisico.
  2. <media_feature> - dichiara le caratteristiche del dispositivo. Utilizzo più comune:
    • min-width: - la larghezza minima della viewport;
    • max-width: - la larghezza massima della viewport.
  3. <operator> - media-type e media-feature sono separati dall'operatore logico opzionale. I suoi valori possono essere: and oppure ,.

Nota

Nei capitoli successivi, verrà considerato l'utilizzo pratico delle media-query.

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 6. Capitolo 1
some-alt