Fundación CSS
En este artículo, aprenderemos acerca de las clases de visibilidad que se muestran por tamaño de pantalla, lo que básicamente significa que los componentes se representarán en la pantalla en función del tamaño de la pantalla.
La clase de visibilidad facilita alternar la vista, es decir, mostrar u ocultar los elementos, según el tamaño de la pantalla o la orientación del dispositivo. Ayuda a controlar los elementos a mostrar según el entorno de navegación. Mostrar por tamaño de pantalla controla el elemento que se mostrará en la pantalla según el tamaño de la pantalla desde donde el usuario accede a la página web.
Las clases de visibilidad de Foundation CSS se muestran por tamaño de pantalla:
- show-for-* : esta clase se utiliza para representar el contenido, según el tamaño de pantalla del dispositivo. La marca de estrella (*) se puede reemplazar con diferentes tamaños de pantalla disponibles.
- show-for-*-only : esta clase se usa para fijar la visualización solo al tamaño de pantalla específico del dispositivo.
Ejemplo 1: En este ejemplo, usamos las clases de visibilidad de mostrar para mostrar ciertas imágenes según el dispositivo en el que los usuarios ven una página. Si su navegador cumple con las condiciones de la clase, se mostrará el elemento. De lo contrario, se ocultará.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Foundation CSS Visibility classes
show-by-screen size
</title>
<meta name="viewport" content=
"width = device-width, initial-scale = 1">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<style>
img {
height: 40px;
width: 40px;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>
Foundation CSS Visibility
classes show-by-screen size
</h3>
<div class="show-for-small-only">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png"
alt="web-development_img">
<h3>
This image is shown only
on a small screen.
</h3>
</div>
<br>
<div class="show-for-medium-up">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png"
alt="BootstrapTutorial_img">
<h3>
This image is shown on
medium screens and up.
</h3>
</div>
<br>
<div class="show-for-medium-only">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"
alt="HTML-Tutorials_img">
<h3>
This image is shown only
on a medium screen.
</h3>
</div>
<br>
<div class="show-for-large-up">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190531152042/node1.png"
alt="node_img">
<h3>
This image is shown on
large screens and up.
</h3>
</div>
<br>
<div class="show-for-large-only">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
alt="gfg_img">
<h3>
This image is shown only
on a large screen.
</h3>
</div>
<br>
<div class="show-for-xlarge-up">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="img">
<h3>
This image is shown on
xlarge screens and up.
</h3>
</div>
<br>
<div class="show-for-xlarge-only">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"
alt="CSSTutorial_img">
<h3>
This image is shown only
on an xlarge screen.
</h3>
</div>
<br>
<div class="show-for-xxlarge-up">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210414220818/jQueryUI.png"
alt="jQueryUI_img">
<h3>
This image is shown on
xxlarge screens and up.
</h3>
</div>
</body>
</html>
Salida: De la siguiente salida, la primera imagen no se muestra en una pantalla pequeña porque solo sería visible en dispositivos pequeños.
Ejemplo 2: Este ejemplo describe el cambio en el color y la imagen de fondo, según los diferentes tamaños de pantalla.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Foundation CSS Visibility Classes
show by screen-size
</title>
<meta name="viewport" content=
"width = device-width, initial-scale = 1">
<style>
img {
height: 100px;
width: 100px;
}
</style>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
</head>
<body>
<h1 style="color:green">
Geeksforgeeks
</h1>
<h3>
Foundation CSS Visibility Classes show by screen-size
</h3>
<div class="show-for-small-only"
style="background-color: aquamarine;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210414220818/jQueryUI.png"
alt="jQuery_img">
<h3>
This image is shown only
on a small screen.
</h3>
</div>
<br>
<div class="show-for-medium-only"
style="background-color: gold;">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"
alt="HTML_img">
<h3>
This image is shown on
medium screens only.
</h3>
</div>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/visibility.html#show-by-screen-size
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA