Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Creazione di Layout Flessibili per Diverse Dimensioni dello Schermo | Responsive Web Design in CSS
Tecniche CSS Avanzate

bookCreazione di Layout Flessibili per Diverse Dimensioni dello Schermo

Nello sviluppo web moderno esistono due approcci: layout adattivo e layout responsivo.

I layout responsivi sono progettati per avere più varianti di visualizzazione che possono passare fluidamente l'una all'altra, consentendo un'estensione e un ridimensionamento flessibile degli elementi. Quando la dimensione della viewport cambia, i blocchi nella pagina si contraggono o si estendono in modo fluido e, a una specifica breakpoint, cambiano la loro posizione per ottimizzare l'uso dello spazio orizzontale.

I layout adattivi presentano più varianti di visualizzazione, ma i cambiamenti di design avvengono tramite salti fissi tra i breakpoint. Una volta raggiunto un breakpoint, il design non può essere modificato fino al successivo breakpoint.

Pratica

Eseguiamo un esercizio creando 2 elementi div. Il primo elemento avrà un layout adattivo, mentre il secondo avrà un layout responsivo. Inoltre, è necessario assegnare valori diversi alla proprietà background-color in base alla variazione della larghezza dello schermo.

  • Per una larghezza da 0 a 320px, il colore è #7f58af;
  • Per una larghezza da 321px a 600px, il colore è #64c5eb;
  • Per una larghezza da 601px a 880px, il colore è #eb4dba;
  • Per una larghezza da 881px in poi, il colore è #feb326.

L'HTML è il seguente:

<div class="adaptive"></div>
<div class="responsive"></div>

Per il layout adattivo, è inoltre necessario specificare una larghezza precisa per l'elemento div.

  • Per una larghezza da 321px a 600px, la larghezza è 300px;
  • Per una larghezza da 601px a 880px, la larghezza è 580px;
  • Per una larghezza da 881px in poi, la larghezza è 860px.

Il CSS è il seguente:

div {
  height: 200px;
  margin: 10px auto;
  background-color: #7f58af;
}

/* ===> Adaptive <=== */

@media screen and (min-width: 321px) {
  .adaptive {
    background-color: #64c5eb;
    width: 300px;
  }
}
@media screen and (min-width: 601px) {
  .adaptive {
    background-color: #eb4dba;
    width: 580px;
  }
}
@media screen and (min-width: 881px) {
  .adaptive {
    background-color: #feb326;
    width: 860px;
  }
}

/* ===> Responsive <=== */

.responsive {
  width: 100%;
}

@media screen and (min-width: 321px) {
  .responsive {
    background-color: #64c5eb;
  }
}
@media screen and (min-width: 601px) {
  .responsive {
    background-color: #eb4dba;
  }
}
@media screen and (min-width: 881px) {
  .responsive {
    background-color: #feb326;
  }
}

Il risultato ottenuto. Prestare attenzione alla variazione della larghezza dello schermo nella parte superiore della registrazione:

question mark

Seleziona le affermazioni corrette.

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 6. Capitolo 3

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

bookCreazione di Layout Flessibili per Diverse Dimensioni dello Schermo

Scorri per mostrare il menu

Nello sviluppo web moderno esistono due approcci: layout adattivo e layout responsivo.

I layout responsivi sono progettati per avere più varianti di visualizzazione che possono passare fluidamente l'una all'altra, consentendo un'estensione e un ridimensionamento flessibile degli elementi. Quando la dimensione della viewport cambia, i blocchi nella pagina si contraggono o si estendono in modo fluido e, a una specifica breakpoint, cambiano la loro posizione per ottimizzare l'uso dello spazio orizzontale.

I layout adattivi presentano più varianti di visualizzazione, ma i cambiamenti di design avvengono tramite salti fissi tra i breakpoint. Una volta raggiunto un breakpoint, il design non può essere modificato fino al successivo breakpoint.

Pratica

Eseguiamo un esercizio creando 2 elementi div. Il primo elemento avrà un layout adattivo, mentre il secondo avrà un layout responsivo. Inoltre, è necessario assegnare valori diversi alla proprietà background-color in base alla variazione della larghezza dello schermo.

  • Per una larghezza da 0 a 320px, il colore è #7f58af;
  • Per una larghezza da 321px a 600px, il colore è #64c5eb;
  • Per una larghezza da 601px a 880px, il colore è #eb4dba;
  • Per una larghezza da 881px in poi, il colore è #feb326.

L'HTML è il seguente:

<div class="adaptive"></div>
<div class="responsive"></div>

Per il layout adattivo, è inoltre necessario specificare una larghezza precisa per l'elemento div.

  • Per una larghezza da 321px a 600px, la larghezza è 300px;
  • Per una larghezza da 601px a 880px, la larghezza è 580px;
  • Per una larghezza da 881px in poi, la larghezza è 860px.

Il CSS è il seguente:

div {
  height: 200px;
  margin: 10px auto;
  background-color: #7f58af;
}

/* ===> Adaptive <=== */

@media screen and (min-width: 321px) {
  .adaptive {
    background-color: #64c5eb;
    width: 300px;
  }
}
@media screen and (min-width: 601px) {
  .adaptive {
    background-color: #eb4dba;
    width: 580px;
  }
}
@media screen and (min-width: 881px) {
  .adaptive {
    background-color: #feb326;
    width: 860px;
  }
}

/* ===> Responsive <=== */

.responsive {
  width: 100%;
}

@media screen and (min-width: 321px) {
  .responsive {
    background-color: #64c5eb;
  }
}
@media screen and (min-width: 601px) {
  .responsive {
    background-color: #eb4dba;
  }
}
@media screen and (min-width: 881px) {
  .responsive {
    background-color: #feb326;
  }
}

Il risultato ottenuto. Prestare attenzione alla variazione della larghezza dello schermo nella parte superiore della registrazione:

question mark

Seleziona le affermazioni corrette.

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 6. Capitolo 3
some-alt