Sommaire

Masquer selon la taille de l’écran

Sur le même principe que précédemment, vous pouvez aussi masquer des éléments selon la taille de l’écran.

Voici les classes à utiliser :

  • .hide-for-medium : pour masquer l’élément sur les écrans de taille moyenne,

  • .hide-for-large : pour masquer l’élément sur les grands écrans.

Bien sûr il n’y a pas de classe .hide-for-small, car cela masquerait toujours l’élément concerné.

De même, vous pouvez masquer des éléments de manière exclusive, avec les classes .hide-for-small-only, .hide-for-medium-only et .hide-for-large-only.

Voici le code HTML de cet exemple :

<p class="hide-for-small-only">Vous n’êtes pas <em>sur un petit écran</em>.</p> 
<p class="hide-for-medium-only">Vous n’êtes pas <em>sur un écran moyen</em></p> 
<p class="hide-for-large-only">Vous n’êtes pas <em>sur un grand écran</em></p>

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

Les classes utilisent à nouveau la propriété display: none avec le paramètre !important.

Voici l’affichage obtenu sur un écran de taille moyenne :

images/C06-009.png

L’affichage indique bien que nous ne sommes pas sur un petit écran, ni sur un grand écran.