Parte 3: Responsive Design e Media Query

Benvenuti alla Lezione 3 del nostro corso di CSS su ZioMark's HUB. In questa sessione, ci concentreremo sul Responsive Design e sull'uso delle Media Query per creare pagine web che si adattano a vari dispositivi, dal pc al cellulare.

Cos'è il Responsive Design?

Il Responsive Design è un approccio alla progettazione web che rende le pagine efficaci su una varietà di dispositivi e finestre di dimensioni diverse. Questo si ottiene tramite l'uso flessibile di layout, immagini e CSS.

Principi chiave del Responsive Design:

• Fluid Grids: Utilizzare percentuali per le dimensioni degli elementi anziché pixel fissi.

• Immagini Flessibili: Immagini che si ridimensionano all'interno dei loro contenitori.

• Media Queries: CSS utilizzato per modificare lo stile di un sito in base alle caratteristiche del dispositivo.

Introduzione alle Media Query

Le media query sono strumenti potenti in CSS che permettono di applicare stili condizionali a pagine web basate su caratteristiche del dispositivo come la larghezza del viewport, l'orientamento e la risoluzione.

Sintassi Base

Una media query si compone di un tipo di media e di almeno una query che controlla la presentazione dei contenuti. La sintassi base è la seguente:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Questa media query applica uno sfondo lightblue al body solo quando la larghezza del viewport è uguale o inferiore a 600px.

Esercizio Finale: Creazione di un Layout Responsive

Obiettivo: Creare un layout di pagina che includa un header, tre colonne di contenuto e un footer. Il layout dovrà adattarsi a schermi di smartphone, tablet e desktop.

Requisiti:

• Header e footer devono estendersi per tutta la larghezza del viewport.

• Le tre colonne devono essere disposte orizzontalmente su schermi larghi e verticalmente su schermi piccoli.

Codice HTML di Partenza:

<div class="container">
  <header>Header</header>
  <div class="content">
    <div class="column">Colonna 1</div>
    <div class="column">Colonna 2</div>
    <div class="column">Colonna 3</div>
  </div>
  <footer>Footer</footer>
</div>

Aggiungi il CSS Responsive:

.container {
  width: 100%;
}

header, footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

.content {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1 1 33%; /* default to three columns */
  padding: 10px;
}

@media (max-width: 768px) {
  .column {
    flex: 1 1 100%; /* stack on smaller screens */
  }
}

Anteprima

Istruzioni:

1. Utilizza il codice HTML di partenza.

2. Aggiungi le regole CSS sopra per gestire il layout generale.

3. Modifica le media query per adattare il design al cambiare delle dimensioni dello schermo.