Visibilité CSS Foundation

Afficher les éléments en fonction de la taille de l'écran

Les classes suivantes affichent les éléments en fonction de l'appareil (taille de l'écran).

Classe Description
.show-for-small-only Afficher les éléments uniquement sur les petits appareils (largeur d'écran inférieure à 40.0625em)
.show-for-medium-up Afficher les éléments sur les appareils de taille moyenne et au-delà (largeur d'écran supérieure à 40.0625em)
.show-for-medium-only Afficher les éléments uniquement sur les appareils de taille moyenne (largeur d'écran comprise entre 40.0625em et 64.0625em)
.show-for-large-up Afficher les éléments sur les appareils de grande taille et au-delà (largeur d'écran supérieure à 64.0625em)
.show-for-large-only Afficher les éléments uniquement sur les appareils de grande taille (largeur d’écran comprise entre 64.0625em et 90.0625em)
.show-for-xlarge-up Afficher les éléments sur les appareils de très grande taille et supérieurs (largeur d’écran supérieure à 90.0625em)
.show-for-xlarge-only Afficher les éléments uniquement sur les appareils de très grande taille et supérieurs (largeur d’écran comprise entre 90.0625em et 120.0625em)
.show-for-xxlarge-up Afficher les éléments sur les appareils ultra-grands et supérieurs (largeur d’écran supérieure à 120.0625em)

L’exemple suivant illustre tout ce qui précède.show-visibilité des classes.

<p class="show-for-small-only">你在小型设备上。</p>
<p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p>
<p class="show-for-medium-only">你在中型设备上。</p>
<p class="show-for-large-up">你在大型、更大型、超大型的设备上</p>
<p class="show-for-large-only">你在大型设备上。</p>
<p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p>
<p class="show-for-xlarge-only">你在更大型设备上。</p>
<p class="show-for-xxlarge-up">你在超大型设备上。</p>

Essayez-le vous-même »

Masquer les éléments en fonction de la taille de l’écran

Les classes suivantes masquent les éléments en fonction de l’appareil (taille de l’écran).

Classe Description
.hide-for-small-only Masquer les éléments uniquement sur les appareils de petite taille (largeur d'écran inférieure à 40.0625em)
.hide-for-medium-up Masquer les éléments sur les appareils de taille moyenne ou supérieure (largeur d'écran supérieure à 40.0625em)
.hide-for-medium-only Masquer les éléments uniquement sur les appareils de taille moyenne (largeur d'écran comprise entre 40.0625em et 64.0625em)
.hide-for-large-up Masquer les éléments sur les appareils de grande taille ou supérieure (largeur d'écran supérieure à 64.0625em)
.hide-for-large-only Masquer les éléments uniquement sur les appareils de grande taille (largeur d'écran comprise entre 64.0625em et 90.0625em)
.hide-for-xlarge-up Masquer les éléments sur les appareils de très grande taille ou supérieure (largeur d'écran supérieure à 90.0625em)
.hide-for-xlarge-only Masquer les éléments uniquement sur les appareils extra-larges et au-delà (largeur d'écran comprise entre 90.0625em et 120.0625em)
.hide-for-xxlarge-up Masquer les éléments sur les appareils ultra-larges et au-delà (largeur d'écran supérieure à 120.0625em) 
<p class="hide-for-small-only">你不在小型设备上。</p>
<p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p>
<p class="hide-for-medium-only">你不在中型设备上。</p>
<p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p>
<p class="hide-for-large-only">你不在大型设备上。</p>
<p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p>
<p class="hide-for-xlarge-only">你不在更大型设备上。</p>
<p class="hide-for-xxlarge-up">你不在超大型设备上。</p>

Essayez-le vous-même »

Afficher les éléments en fonction de l'orientation de l'écran

Les classes suivantes masquent les éléments en fonction de l’appareil (taille de l’écran).

Nous pouvons définir si les éléments sont affichés ou masqués selon les différentes orientations. Les appareils de bureau tels que les ordinateurs portables sont généralement en mode paysage, mais les téléphones mobiles et les tablettes peuvent être en mode paysage ou portrait. Nous pouvons afficher ou masquer des éléments en fonction de l'orientation dans laquelle l'utilisateur tient son téléphone :

Classe Description
.show-for-landscape Afficher les éléments en mode paysage (masqués en mode portrait)
.show-for-portrait Afficher les éléments en mode portrait (masqués en mode paysage)

L'exemple suivant affiche un contenu textuel en fonction de l'orientation utilisée :

Exemple

<p class="show-for-landscape">Le texte n'est visible qu'en mode paysage.</p>
<p class="show-for-portrait">Le texte n'est visible qu'en mode portrait.</p>

Essayez-le vous-même »

Afficher et masquer sur les appareils à écran tactile

Vous pouvez afficher et masquer des éléments selon que l'appareil prend en charge le tactile.

Classe Description
.show-for-touch Afficher sur les appareils qui prennent en charge le tactile (masquer sur les appareils qui ne le prennent pas en charge)
.hide-for-touch Masquer sur les appareils qui prennent en charge le tactile (afficher sur les appareils qui ne le prennent pas en charge)

L'exemple suivant affiche un contenu texte selon que l'appareil prend en charge le tactile :

Exemple

<p class="show-for-touch">Votre appareil prend en charge le tactile.</p>
<p class="hide-for-touch">Votre appareil ne prend pas en charge le tactile.</p>
Essayez-le vous-même »
autres extensions