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:
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 2.04
Creazione 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:
Grazie per i tuoi commenti!