Fondation CSS visibilité
En fonction de la taille de l'écran d'éléments d'affichage
Les classes suivantes seront basées sur l'appareil (taille de l'écran) pour l'élément d'affichage.
| catégorie | description |
|---|---|
| .Show-pour-petite-seulement | Afficher seulement les éléments sur un petit appareil (écran largeur inférieure à 40.0625em) |
| .Show-for-medium-up | Eléments d'affichage sur les dispositifs de moyenne et au-dessus (écran largeur supérieure à 40.0625em) |
| .Show-pour-moyen seulement | Afficher uniquement sur l'élément de dispositif de taille moyenne (largeur de l'écran entre 40.0625em à 64.0625em) |
| .Show-pour-grand-up | Dans un grand équipement et plusieurs éléments d'affichage (écran largeur supérieure à 64.0625em) |
| .Show-pour-grand-seulement | Uniquement affiché sur l'élément d'équipement de grande taille (largeur de l'écran entre 64.0625em à 90.0625em) |
| .Show-for-xlarge-up | Eléments d'affichage sur l'équipement plus grand et plus (écran largeur supérieure à 90.0625em) |
| .Show-for-xlarge uniquement | Seulement affiché sur les éléments d'équipement plus grandes et plus (largeur de l'écran entre 90.0625em à 120.0625em) |
| .Show-for-XXLarge-up | Sur le grand équipement et plusieurs éléments d'affichage (écran largeur supérieure à 120.0625em) |
L'exemple suivant montre tout ce qui précède .show- classe de visibilité.
<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>
Selon l'élément caché de taille de l'écran
Les classes suivantes seront basées sur l'appareil (taille de l'écran) pour masquer les éléments.
| catégorie | description |
|---|---|
| .hide-pour-petite-seulement | cacher Seuls les éléments sur un petit appareil (écran largeur inférieure à 40.0625em) |
| .hide-for-medium-up | Cacher les éléments dans les dispositifs de moyenne et au-dessus (écran largeur supérieure à 40.0625em) |
| .hide-pour-moyen seulement | cacher Seuls les éléments sur un dispositif de milieu de gamme (largeur de l'écran entre 40.0625em à 64.0625em) |
| .hide-pour-grand-up | Masquer les éléments dans les équipements grand et plus (écran largeur supérieure à 64.0625em) |
| .hide-pour-grand-seulement | cacher Seuls les éléments sur les grands équipements (largeur de l'écran entre 90.0625em à 64.0625em) |
| .hide-for-xlarge-up | Dans l'élément caché du matériel plus grand et plus (écran largeur supérieure à 90.0625em) |
| .hide-for-xlarge uniquement | Seulement caché élément (largeur de l'écran 90.0625em entre 120.0625em) sur l'équipement plus grand et plus |
| .hide-for-XXLarge-up | élément caché sur l'équipement grand et plus (écran largeur 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>
Eléments d'affichage selon l'orientation de l'écran
Les classes suivantes seront basées sur l'appareil (taille de l'écran) pour masquer les éléments.
Nous pouvons mettre un élément dans des directions différentes, d'afficher ou de masquer. Les ordinateurs portables et d'autres appareils de bureau généralement horizontales, mais les téléphones mobiles et les tablettes peuvent être horizontaux ou verticaux, nous pouvons cacher et afficher l'élément selon le téléphone mobile de l'utilisateur pour obtenir les directions:
| catégorie | description |
|---|---|
| .Show-for-paysage | Eléments d'affichage dans le sens transversal (longitudinal) cacher |
| .Show-pour-portrait | Eléments d'affichage (latéral caché) en orientation portrait |
L'exemple suivant illustre le contenu du texte, en fonction du sens d'utilisation:
Exemples
<P class = "show-for -portrait"> Texte seulement en portrait. </ P>
Essayez »
dispositif d'affichage à écran tactile et se cacher
Vous pouvez selon que l'appareil prend en charge tactile pour afficher l'élément caché.
| catégorie | description |
|---|---|
| .Show-pour-touch | Affichées sur un support de dispositif d'écran tactile (non pris en charge sur les périphériques cachés) |
| .hide-pour-touch | Dans les appareils tactiles de soutien cachés (non affiché sur les périphériques pris en charge) |
Les exemples suivants selon que l'appareil prend en charge tactile pour afficher le texte:
Exemples
<P class = "hide-for -touch"> Votre appareil ne supporte pas l' écran tactile. </ P>