giovedì 20 febbraio 2025

Corso di CSS & Web Design: 7 – Responsive Design

7 – Responsive Design

1. Concetto di mobile-first

Responsive Design significa che il layout e i contenuti di una pagina web si adattano automaticamente alle dimensioni dello schermo del dispositivo (desktop, tablet, smartphone).

Principio mobile-first

Si sviluppa il layout base per dispositivi mobili.
Successivamente si aggiungono regole CSS per schermi più grandi tramite media queries.
Vantaggi:
- Migliore performance su mobile.
- Approccio progressivo e modulare.

/* Stile base (mobile) */
body {
  font-size: 16px;
  padding: 10px;
}

2. Media Queries e breakpoints

2.1 Sintassi di base

@media (min-width: 768px) {
  /* regole per tablet e superiori */
}

@media (min-width: 1024px) {
  /* regole per desktop */
}

min-width → mobile-first
max-width → desktop-first
È possibile combinare condizioni multiple:

@media (min-width: 768px) and (max-width: 1023px) {
  /* tablet */
}

2.2 Breakpoints comuni

Dispositivo	Breakpoint suggerito
Mobile	0 – 767px
Tablet	768 – 1023px
Desktop	1024 – 1440px
Large Desktop	>1440px

3. Tecniche per adattare contenuti

3.1 Immagini responsive

max-width: 100%; height: auto;

img {
  max-width: 100%;
  height: auto;
}

3.2 Menu responsive

Nascondere il menu principale su mobile e sostituirlo con hamburger menu:

.navbar {
  display: flex;
  flex-direction: column; /* mobile */
}
@media (min-width: 768px) {
  .navbar {
    flex-direction: row; /* desktop */
  }
}

3.3 Griglie responsive

Usando Flexbox:

.grid-item {
  flex: 1 1 100%; /* mobile: una colonna */
}

@media (min-width: 768px) {
  .grid-item {
    flex: 1 1 48%; /* tablet: due colonne */
  }
}

@media (min-width: 1024px) {
  .grid-item {
    flex: 1 1 30%; /* desktop: tre colonne */
  }
}

Usando CSS Grid:

.container {
  display: grid;
  grid-template-columns: 1fr; /* mobile */
  gap: 15px;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr; /* tablet */
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr; /* desktop */
  }
}

4. Introduzione a framework CSS

4.1 Bootstrap

Sistema a 12 colonne.
Classi predefinite: .container, .row, .col-md-6, .d-flex, .text-center.
Permette di creare layout responsive con poche righe di codice.

<div class="container">
  <div class="row">
    <div class="col-md-6">Colonna 1</div>
    <div class="col-md-6">Colonna 2</div>
  </div>
</div>

4.2 Tailwind

Framework utility-first: classi rapide per padding, margin, colori, flex, grid.

<div class="flex flex-col md:flex-row gap-4">
  <div class="bg-blue-500 p-4">Colonna 1</div>
  <div class="bg-green-500 p-4">Colonna 2</div>
</div>

5. Esercizio svolto: rendere responsive una pagina portfolio

Obiettivo

Creare una pagina portfolio con griglia di progetti che si adatta a mobile, tablet e desktop.

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Portfolio Responsive</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <header class="header">Portfolio</header>
  <nav class="navbar">
    <a href="#">Home</a>
    <a href="#">Progetti</a>
    <a href="#">Contatti</a>
  </nav>
  <main class="container">
    <div class="project">Progetto 1</div>
    <div class="project">Progetto 2</div>
    <div class="project">Progetto 3</div>
    <div class="project">Progetto 4</div>
    <div class="project">Progetto 5</div>
  </main>
  <footer class="footer">© 2025 Portfolio</footer>
</body>
</html>

CSS (stile.css)

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

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

.navbar {
  display: flex;
  flex-direction: column;
  background-color: #555;
}

.navbar a {
  color: white;
  padding: 10px;
  text-decoration: none;
  text-align: center;
}

@media (min-width: 768px) {
  .navbar {
    flex-direction: row;
    justify-content: center;
  }
  .navbar a {
    margin: 0 15px;
  }
}

.container {
  display: grid;
  grid-template-columns: 1fr; /* mobile */
  gap: 15px;
  padding: 15px;
}

.project {
  background-color: #4fa3f2;
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Risultato

Navbar verticale su mobile, orizzontale su tablet e desktop.
Portfolio con 1 colonna su mobile, 2 colonne su tablet, 3 colonne su desktop.
Design responsivo e pulito, adattabile a qualsiasi dispositivo.

SILICIO E NUVOLE