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.
