Visibilidad de Foundation CSS

Mostrar elementos según el tamaño de la pantalla

Las siguientes clases mostrarán elementos según el dispositivo (tamaño de pantalla).

Clase Descripción
.show-for-small-only Mostrar elementos solo en dispositivos pequeños (ancho de pantalla menor que 40.0625em)
.show-for-medium-up Mostrar elementos en dispositivos medianos y superiores (ancho de pantalla mayor que 40.0625em)
.show-for-medium-only Mostrar elementos solo en dispositivos medianos (ancho de pantalla entre 40.0625em y 64.0625em)
.show-for-large-up Mostrar elementos en dispositivos grandes y superiores (ancho de pantalla mayor que 64.0625em)
.show-for-large-only Mostrar elementos solo en dispositivos grandes (ancho de pantalla entre 64.0625em y 90.0625em)
.show-for-xlarge-up Mostrar elementos en dispositivos extra grandes y superiores (ancho de pantalla mayor que 90.0625em)
.show-for-xlarge-only Mostrar elementos solo en dispositivos extra grandes y superiores (ancho de pantalla entre 90.0625em y 120.0625em)
.show-for-xxlarge-up Mostrar elementos en dispositivos ultra grandes y superiores (ancho de pantalla mayor que 120.0625em)

El siguiente ejemplo demuestra todas las.show-visibilidades de las clases anteriores.

<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>

Pruébalo »

Ocultar elementos según el tamaño de la pantalla

Las siguientes clases ocultarán elementos según el dispositivo (tamaño de pantalla).

Clase Descripción
.hide-for-small-only Ocultar elementos solo en dispositivos pequeños (ancho de pantalla menor que 40.0625em)
.hide-for-medium-up Ocultar elementos en dispositivos medianos y superiores (ancho de pantalla mayor que 40.0625em)
.hide-for-medium-only Ocultar elementos solo en dispositivos medianos (ancho de pantalla entre 40.0625em y 64.0625em)
.hide-for-large-up Ocultar elementos en dispositivos grandes y superiores (ancho de pantalla mayor que 64.0625em)
.hide-for-large-only Ocultar elementos solo en dispositivos grandes (ancho de pantalla entre 64.0625em y 90.0625em)
.hide-for-xlarge-up Ocultar elementos en dispositivos extra grandes y superiores (ancho de pantalla mayor que 90.0625em)
.hide-for-xlarge-only Ocultar elementos solo en dispositivos extra grandes y superiores (ancho de pantalla entre 90.0625em y 120.0625em)
.hide-for-xxlarge-up Ocultar elementos en dispositivos ultra grandes y superiores (ancho de pantalla mayor que 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>

Pruébalo »

Mostrar elementos según la orientación de la pantalla

Las siguientes clases ocultarán elementos según el dispositivo (tamaño de pantalla).

Podemos establecer si los elementos se muestran u ocultan en diferentes orientaciones. Los dispositivos de escritorio como las computadoras portátiles suelen estar en horizontal, pero los teléfonos y tabletas pueden estar en horizontal o vertical. Podemos configurar la visibilidad de los elementos según la orientación en que el usuario sostiene su teléfono:

Clase Descripción
.show-for-landscape Mostrar elementos en orientación horizontal (ocultos en vertical)
.show-for-portrait Mostrar elementos en orientación vertical (ocultos en horizontal)

El siguiente ejemplo muestra contenido de texto según la orientación utilizada:

Ejemplo

<p class="show-for-landscape">El texto solo se muestra en horizontal.</p>
<p class="show-for-portrait">El texto solo se muestra en vertical.</p>

Pruébalo »

Mostrar y ocultar en dispositivos táctiles

Puedes mostrar y ocultar elementos según si el dispositivo soporta o no la función táctil.

Clase Descripción
.show-for-touch Mostrar en dispositivos con soporte táctil (ocultar en dispositivos sin soporte)
.hide-for-touch Ocultar en dispositivos con soporte táctil (mostrar en dispositivos sin soporte)

El siguiente ejemplo muestra contenido de texto según si el dispositivo soporta o no la función táctil:

Ejemplo

<p class="show-for-touch">Tu dispositivo admite la pantalla táctil.</p>
<p class="hide-for-touch">Tu dispositivo no admite la pantalla táctil.</p>
Pruébalo »
Otras extensiones