4.1 Valori percentuali
Valori percentuali e unità relative in CSS sono fondamentali per creare layout flessibili e reattivi. Permettono agli elementi di adattarsi a diverse dimensioni degli schermi e condizioni variabili, assicurando una migliore compatibilità e usabilità.
I valori percentuali sono utilizzati per impostare le dimensioni degli elementi relativamente alle dimensioni dei loro elementi genitori. Questo rende il layout più flessibile e adattabile.
Esempio di utilizzo %:
.container {
width: 80%;
margin: 0 auto;
background-color: #f4f4f4;
}
.box {
width: 50%;
padding-top: 25%; /* Rapporto aspetto 1:2 */
background-color: #3498db;
color: white;
text-align: center;
position: relative;
}
.box::before {
content: "";
display: block;
padding-top: 50%; /* Rapporto aspetto 2:1 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di utilizzo %</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="min-height: 200px;">
<div class="container">
<div class="box">Contenuto</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di utilizzo %</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Contenuto</div>
</div>
</body>
</html>
Spiegazione del codice:
.container: imposta la larghezza del contenitore all'80% della larghezza dell'elemento genitore, centrando conmargin: 0 auto.box: imposta la larghezza del blocco al 50% della larghezza del contenitore. L'altezza del blocco è determinata tramitepadding-top, che assicura un rapporto aspetto 1:2
4.2 Unità relative (em e rem)
L'unità em è un'unità relativa che dipende dalla dimensione del font dell'elemento genitore. Se la dimensione del font del genitore cambia, anche i valori em cambiano.
Esempio di utilizzo em:
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 1.5 * 16px = 24px */
padding: 1em; /* 1 * 16px = 16px */
}
L'unità rem è un'unità relativa che dipende dalla dimensione del font dell'elemento radice (html).
Non dipende dagli elementi genitori, il che la rende più prevedibile e comoda per creare layout scalabili.
Esempio di utilizzo rem:
<div class="container">
Qualche testo dentro il contenitore
<div class="box">
Qualche testo dentro la scatola
</div>
</div>
html {
font-size: 16px;
}
.container {
font-size: 1rem; /* 16px */
padding: 2rem; /* 32px */
}
.box {
font-size: 1.5rem; /* 24px */
margin: 1rem; /* 16px */
}
Confronto em e rem:
em: dipende dalla dimensione del font dell'elemento genitore, il che può portare a un effetto a cascata con annidamentirem: dipende dalla dimensione del font dell'elemento radice (html), il che la rende più prevedibile e semplice da usare
4.3 Uso combinato di %
L'uso di unità relative (em e rem) combinato con percentuali consente di creare layout flessibili e adattabili, che si visualizzano correttamente su qualsiasi dispositivo.
Esempio: Uso combinato di %
Creiamo un layout in cui le dimensioni degli elementi sono definite usando percentuali e unità relative.
html {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
.header, .footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
.content {
display: flex;
gap: 1rem;
margin: 1rem 0;
}
.sidebar {
flex: 1 1 30%;
background-color: #f4f4f4;
padding: 1rem;
}
.main {
flex: 1 1 70%;
background-color: #e4e4e4;
padding: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uso combinato di % e unità relative</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">Titolo</div>
<div class="content">
<div class="sidebar">Barra laterale</div>
<div class="main">Contenuto principale</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Spiegazione del codice:
html: imposta la dimensione del font base per l'intero documento.container: usa percentuali per impostare la larghezza del contenitore e centrarlo sulla pagina.headere.footer: usanoremper i margini, rendendoli prevedibili.content: usa Flexbox per posizionare la barra laterale e il contenuto principale con uno spazio tra di loro.sidebare.main: usano percentuali per impostare la larghezza delle colonne eremper i margini
GO TO FULL VERSION