Philip: /* Paragrafo leggibile */

2025-03-15T18:47:20Z

Paragrafo leggibile

← Versione meno recente		Versione delle 21:47, 15 mar 2025
Riga 96:		Riga 96:
	Risultato del testo leggibile:		Risultato del testo leggibile:
	{{Iframe		{{Iframe
	\|url = https://codeeditor.ru/code.php?id=2502KSM7stvi1Y		\|url = https://codeeditor.ru/code.php?id=2502KSM7stvi1Y&lang=it
	\|altezza = 500px		\|altezza = 500px
	\|titolo = CSS Testo adattivo		\|titolo = CSS Testo adattivo

Philip: Creata pagina con "'''CSS Testo adattivo''' è un approccio alla formattazione del contenuto testuale che garantisce una visualizzazione ottimale del testo su diversi dispositivi e schermi. Questa tecnologia è una componente essenziale del web design reattivo. == Principali unità di misura == === Unità relative === * '''`em`''' – unità relativa che dipende dalla dimensione del carattere dell'elemento padre * '''`rem`''' – unità relativa basata sulla dimens..."

2025-03-15T18:46:46Z

Creata pagina con "'''CSS Testo adattivo''' è un approccio alla formattazione del contenuto testuale che garantisce una visualizzazione ottimale del testo su diversi dispositivi e schermi. Questa tecnologia è una componente essenziale del web design reattivo. == Principali unità di misura == === Unità relative === * '''<code>em</code>''' – unità relativa che dipende dalla dimensione del carattere dell'elemento padre * '''<code>rem</code>''' – unità relativa basata sulla dimens..."

Nuova pagina

'''CSS Testo adattivo''' è un approccio alla formattazione del contenuto testuale che garantisce una visualizzazione ottimale del testo su diversi dispositivi e schermi. Questa tecnologia è una componente essenziale del web design reattivo.

== Principali unità di misura ==

=== Unità relative ===

* '''<code>em</code>''' – unità relativa che dipende dalla dimensione del carattere dell'elemento padre
* '''<code>rem</code>''' – unità relativa basata sulla dimensione del carattere dell'elemento radice (root em)
* '''<code>vw</code>''' – unità equivalente all'1% della larghezza della finestra di visualizzazione (viewport)
* '''<code>vh</code>''' – unità equivalente all'1% dell'altezza della finestra di visualizzazione (viewport)
* '''<code>vmin</code>''' – il valore minore tra vw e vh
* '''<code>vmax</code>''' – il valore maggiore tra vw e vh

=== Unità assolute ===

* '''<code>px</code>''' – pixel
* '''<code>pt</code>''' – punti
* '''<code>pc</code>''' – pica

=== Proprietà ===
* <code>font-size</code> — dimensione del carattere.
* <code>line-height</code> — altezza della riga.
* <code>font-weight</code> — spessore del carattere.
* <code>text-align</code> — allineamento del testo.
* <code>word-wrap</code> e <code>overflow-wrap</code> — gestione dell'andata a capo delle parole.

== Tecniche di adattamento ==

=== Tipografia fluida (Fluid Typography) ===
La tipografia fluida consente di scalare il testo in base alla dimensione dello schermo:<syntaxhighlight lang="css">
.fluid-text {
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}
</syntaxhighlight>

=== Media Queries ===
Le Media Queries permettono di applicare diversi stili in base alla dimensione dello schermo:<syntaxhighlight lang="css">
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}

@media screen and (min-width: 769px) {
body {
font-size: 18px;
}
}
</syntaxhighlight>

== La funzione calc() ==
La funzione <code>calc()</code> consente di combinare diverse unità di misura:<syntaxhighlight lang="css">
.adaptive-heading {
font-size: calc(16px + 2vw);
line-height: calc(1.1em + 0.5vw);
}
</syntaxhighlight>

== Funzioni moderne di CSS ==

=== clamp() ===
La funzione <code>clamp()</code> imposta valori minimi, preferiti e massimi:<syntaxhighlight lang="css">
.heading {
font-size: clamp(1.5rem, 5vw, 3rem);
}
</syntaxhighlight>

=== min() e max() ===
Le funzioni <code>min()</code> e <code>max()</code> aiutano a stabilire limiti dinamici:<syntaxhighlight lang="css">
.paragraph {
width: min(65ch, 100%);
font-size: max(1rem, 2vw);
}
</syntaxhighlight>

== Esempi di utilizzo ==

=== Titolo adattivo ===
<syntaxhighlight lang="css">
h1 {
font-size: clamp(2rem, 5vw + 1rem, 4rem);
line-height: 1.2;
margin-bottom: calc(1rem + 2vw);
}
</syntaxhighlight>

=== Paragrafo leggibile ===
<syntaxhighlight lang="css">
p {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
line-height: 1.6;
max-width: 65ch;
margin: 0 auto;
}
</syntaxhighlight>
Risultato del testo leggibile:
{{Iframe
|url = https://codeeditor.ru/code.php?id=2502KSM7stvi1Y
|altezza = 500px
|titolo = CSS Testo adattivo
}}

== Consigli pratici ==

* Utilizzare unità di misura relative invece di assolute
* Combinare diverse tecniche per ottenere risultati ottimali
* Testare il layout su diversi dispositivi
* Considerare la leggibilità del testo
* Definire valori minimi e massimi per evitare dimensioni estreme

== Compatibilità con i browser ==
{| class="wikitable"
!Funzione
!Chrome
!Firefox
!Safari
!Edge
|-
|clamp()
|79+
|75+
|13.1+
|79+
|-
|calc()
|19+
|4+
|6+
|12+
|-
|vw/vh
|20+
|19+
|6+
|12+
|}

CSS Testo adattivo - Cronologia

Philip: /* Paragrafo leggibile */