Fundación visibilidad CSS
De acuerdo con el tamaño de la pantalla de visualización de elementos
Las siguientes clases se basarán en el dispositivo (tamaño de pantalla) para el elemento de visualización.
| categoría | descripción |
|---|---|
| .show-para-pequeña de sólo | Sólo mostrar elementos en un pequeño dispositivo (pantalla de anchura inferior a 40.0625em) |
| .show-por-medio-up | Elementos de visualización en los dispositivos de media y por encima de la pantalla (ancho mayor que 40.0625em) |
| .show-por-medio de sólo | Mostrar únicamente en elemento del dispositivo de tamaño medio (entre el ancho de la pantalla 40.0625em a 64.0625em) |
| .show-de-gran-up | En un equipo grande y más elementos de visualización (pantalla de ancho mayor 64.0625em) |
| .show-de-gran-only | Sólo se muestra el gran elemento equipo (ancho de la pantalla entre 64.0625em a 90.0625em) |
| .show-para-XLarge-up | Elementos de visualización en el equipo más grande y más (pantalla de ancho mayor 90.0625em) |
| .show-para-XLarge sólo | Sólo se muestra en los elementos de equipos más grandes y más (ancho de la pantalla entre 90.0625em a 120.0625em) |
| .show-para-Xxlarge-up | En el equipo grande y más elementos de visualización (anchura mayor que la pantalla 120.0625em) |
El siguiente ejemplo demuestra todo lo anterior .show- clase visibilidad.
<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>
De acuerdo con el elemento oculto tamaño de la pantalla
Las siguientes clases se basarán en el dispositivo (tamaño de pantalla) para ocultar elementos.
| categoría | descripción |
|---|---|
| .hide-para-pequeña de sólo | Sólo ocultar elementos en un pequeño dispositivo (pantalla de anchura inferior a 40.0625em) |
| .hide-por-medio-up | Ocultar elementos en los dispositivos de media y por encima de la pantalla (ancho mayor que 40.0625em) |
| .hide-por-medio de sólo | Sólo ocultar elementos en un dispositivo de gama media (ancho de la pantalla entre 40.0625em a 64.0625em) |
| .hide-de-gran-up | Ocultar elementos en equipos grandes y más (ancho mayor que la pantalla 64.0625em) |
| .hide-de-gran-only | Sólo ocultar elementos en equipos de gran tamaño (anchura de la pantalla entre 90.0625em a 64.0625em) |
| .hide-para-XLarge-up | En el elemento oculto más grande y más equipo (pantalla ancho mayor 90.0625em) |
| .hide-para-XLarge sólo | Sólo (90.0625em ancho de la pantalla entre 120.0625em) elemento oculto en el equipo más grande y más |
| .hide-para-Xxlarge-up | elemento oculto en el grande y más equipo (pantalla ancho mayor 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>
Elementos de visualización de acuerdo con la orientación de la pantalla
Las siguientes clases se basarán en el dispositivo (tamaño de pantalla) para ocultar elementos.
Podemos establecer un elemento en diferentes direcciones, si desea mostrar u ocultar. Las computadoras portátiles y otros dispositivos de escritorio generalmente horizontal, pero los teléfonos móviles y dispositivos de tableta puede ser horizontal o vertical, se puede ocultar y mostrar el elemento de acuerdo con el teléfono móvil del usuario para obtener direcciones:
| categoría | descripción |
|---|---|
| .show fines de paisaje | Elementos indicadores en la dirección transversal (longitudinal) ocultar |
| .show-para-retrato | Elementos de visualización (lateral oculto) en orientación vertical |
El siguiente ejemplo muestra el contenido del texto de acuerdo con la dirección de uso:
Ejemplos
<P class = "show-para -retrato"> Sólo texto en el retrato. </ P>
Trate »
dispositivo de pantalla táctil y ocultar
Puede dependiendo de si el dispositivo es compatible con el tacto para mostrar elemento oculto.
| categoría | descripción |
|---|---|
| .show-de-toque | Exhibida en un soporte de dispositivos de pantalla táctil (no se admite en los dispositivos ocultos) |
| .hide-de-toque | En los dispositivos táctiles de apoyo ocultos (no aparece en los dispositivos compatibles) |
Los ejemplos siguientes en función de si el dispositivo es compatible con el tacto para mostrar el texto:
Ejemplos
<P class = "ocultar-a -touch"> El dispositivo no es compatible con la pantalla táctil. </ P>