Foundation es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
En este artículo, aprenderemos sobre las clases de visibilidad Ocultar por tamaño de pantalla que representan los componentes en la pantalla en función del tamaño de la pantalla. Las clases de visibilidad nos permiten mostrar u ocultar elementos según el tamaño de la pantalla o la orientación del dispositivo. Puede usar clases de visibilidad para controlar qué elementos ven los usuarios según su entorno de navegación.
Ocultar por clases de visibilidad de tamaño de pantalla
- hide-for-medium: esta clase oculta el elemento para dispositivos medianos
- hide-for-large: esta clase oculta el elemento para dispositivos grandes
- hide-for-small-only: esta clase oculta el elemento para dispositivos pequeños. El elemento seguirá siendo visible en dispositivos medianos y grandes.
- hide-for-medium-only: esta clase oculta el elemento para dispositivos medianos. El elemento seguirá siendo visible en dispositivos pequeños y grandes.
- hide-for-large-only: esta clase oculta el elemento para dispositivos grandes. El elemento seguirá siendo visible en dispositivos pequeños y grandes.
Nota: No existe una clase .hide-for-small porque eso ocultaría permanentemente el elemento. En su lugar , se puede usar la clase simple .hide para esa funcionalidad.
Sintaxis:
<div class="hide-for-*">
// content
</div>
Ejemplo 1: en este ejemplo, alternamos la imagen y el fondo según el tamaño de la pantalla
HTML
<html>
<head>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<style>
img {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Foundation CSS Visibility Classes
Hide by Screen Size</h3>
<div class="hide-for-small-only"
style="background-color: aquamarine;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210414220818/jQueryUI.png" />
<h3>I am a medium screen.This image
is hidden to small screen.</h3>
</div>
<br>
<div class=
"hide-for-medium-only"
style="background-color: gold;">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png" />
<h3>I am a small screen.This image
is hidden to medium screens.</h3>
</div>
<br>
</body>
</html>
Producción:
Clases de visibilidad de Foundation CSS Ocultar por tamaño de pantalla
Ejemplo 2: En este ejemplo, simplemente cambiaremos el texto entre pantallas pequeñas y grandes.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<style>
img {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Foundation CSS Visibility Classes
Hide by Screen Size</h3>
<div class="hide-for-small-only"
style="background-color: aquamarine;">
I am Large Screen
</div><br>
<div class="hide-for-medium-only"
style="background-color: gold;">
I am Small Screen
</div><br>
</body>
</html>
Producción:
Clases de visibilidad de Foundation CSS Ocultar por tamaño de pantalla
Referencia: https://get.foundation/sites/docs/visibility.html
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA