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

```css
@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.

<figure><img src="/files/7C9tVnTSFRw11wdyeIWV" alt=""><figcaption></figcaption></figure>

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

```html
<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:

```css
.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

<figure><img src="/files/Ppuk59llQbYmqhePQ76x" alt=""><figcaption></figcaption></figure>

### 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.ziomark.xyz/css/parte-3-responsive-design-e-media-query.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.