Creazione 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: