Philip : Page créée avec « '''CSS Texte adaptatif''' est une approche de conception de contenu textuel qui garantit un affichage optimal du texte sur différents appareils et écrans. Cette technologie est un élément essentiel du design web réactif. == Principales unités de mesure == === Unités relatives === * '''`em`''' – unité relative dépendant de la taille de police de l'élément parent * '''`rem`''' – unité relative dépendant de la taille de poli... »

2025-03-15T18:44:12Z

Page créée avec « '''CSS Texte adaptatif''' est une approche de conception de contenu textuel qui garantit un affichage optimal du texte sur différents appareils et écrans. Cette technologie est un élément essentiel du design web réactif. == Principales unités de mesure == === Unités relatives === * '''<code>em</code>''' – unité relative dépendant de la taille de police de l'élément parent * '''<code>rem</code>''' – unité relative dépendant de la taille de poli... »

Nouvelle page

'''CSS Texte adaptatif''' est une approche de conception de contenu textuel qui garantit un affichage optimal du texte sur différents appareils et écrans. Cette technologie est un élément essentiel du design web réactif.

== Principales unités de mesure ==

=== Unités relatives ===

* '''<code>em</code>''' – unité relative dépendant de la taille de police de l'élément parent
* '''<code>rem</code>''' – unité relative dépendant de la taille de police de l'élément racine (root em)
* '''<code>vw</code>''' – unité correspondant à 1% de la largeur de la fenêtre (viewport)
* '''<code>vh</code>''' – unité correspondant à 1% de la hauteur de la fenêtre (viewport)
* '''<code>vmin</code>''' – la plus petite valeur entre vw et vh
* '''<code>vmax</code>''' – la plus grande valeur entre vw et vh

=== Unités absolues ===

* '''<code>px</code>''' – pixels
* '''<code>pt</code>''' – points
* '''<code>pc</code>''' – picas

=== Propriétés ===
* <code>font-size</code> — taille de la police.
* <code>line-height</code> — hauteur de ligne.
* <code>font-weight</code> — épaisseur de la police.
* <code>text-align</code> — alignement du texte.
* <code>word-wrap</code> et <code>overflow-wrap</code> — contrôle du retour à la ligne.

== Techniques d’adaptation ==

=== Typographie fluide (Fluid Typography) ===
La typographie fluide permet d’adapter la taille du texte en fonction de la taille de l’écran :<syntaxhighlight lang="css">
.fluid-text {
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}
</syntaxhighlight>

=== Media Queries ===
Les Media Queries permettent de définir différents styles en fonction de la taille de l’écran :<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 fonction calc() ==
La fonction <code>calc()</code> permet de combiner différentes unités de mesure :<syntaxhighlight lang="css">
.adaptive-heading {
font-size: calc(16px + 2vw);
line-height: calc(1.1em + 0.5vw);
}
</syntaxhighlight>

== Fonctions modernes de CSS ==

=== clamp() ===
La fonction <code>clamp()</code> permet de définir une valeur minimale, préférée et maximale :<syntaxhighlight lang="css">
.heading {
font-size: clamp(1.5rem, 5vw, 3rem);
}
</syntaxhighlight>

=== min() et max() ===
Les fonctions <code>min()</code> et <code>max()</code> permettent de définir des limites dynamiques :<syntaxhighlight lang="css">
.paragraph {
width: min(65ch, 100%);
font-size: max(1rem, 2vw);
}
</syntaxhighlight>

== Exemples d’utilisation ==

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

=== Paragraphe lisible ===
<syntaxhighlight lang="css">
p {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
line-height: 1.6;
max-width: 65ch;
margin: 0 auto;
}
</syntaxhighlight>
Résultat du texte lisible :
{{Iframe
|lien = https://codeeditor.ru/code.php?id=2502KSM7stvi1Y&lang=fr
|hauteur = 500px
|titre = CSS Texte adaptatif
}}

== Conseils pratiques ==

* Utilisez des unités relatives plutôt qu’absolues
* Combinez différentes techniques pour un rendu optimal
* Testez votre mise en page sur plusieurs appareils
* Pensez à la lisibilité du texte
* Définissez des valeurs minimales et maximales pour éviter les tailles extrêmes

== Compatibilité avec les navigateurs ==
{| class="wikitable"
!Fonction
!Chrome
!Firefox
!Safari
!Edge
|-
|clamp()
|79+
|75+
|13.1+
|79+
|-
|calc()
|19+
|4+
|6+
|12+
|-
|vw/vh
|20+
|19+
|6+
|12+
|}

CSS Texte adaptatif - Historique des versions