Sommaire

Afficher selon l’écran

1. Les affichages par taille d’écran

Les classes .show-for-[size] permettent d’afficher des éléments selon la taille de l’écran de diffusion. Le suffixe [size] indique la taille de l’écran ciblé : small, medium ou large.

Voici le code HTML de cet exemple :

<p>Vous utilisez un écran d’une taille égale ou supérieure à ceux des smartphones.</p> 
<p class="show-for-medium">Vous utilisez un écran d’une taille égale ou supérieure à ceux des tablettes.</p> 
<p class="show-for-large">Vous utilisez un écran d’un ordinateur.</p>

Le fichier de cet exemple à télécharger est Chapitre 06 / 06-affichage-b1.html.

Pour le premier paragraphe, il n’y a pas d’indication de classe. Foundation étant Mobile First, cet élément s’affichera pour tous les écrans, sans distinction de taille.

Pour le deuxième paragraphe, l’utilisation de la classe .show-for-medium indique que ce paragraphe ne sera affiché que sur les écrans d’une taille égale ou supérieure à ceux des tablettes.

Pour le dernier paragraphe, l’utilisation de la classe .show-for-large indique que ce paragraphe ne sera affiché que sur les écrans d’ordinateur.

Voici l’affichage sur un écran large :

images/C06-001.png

Comme nous sommes sur un écran large, ...