Fundación CSS
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. La detección de orientación se puede utilizar para determinar si un elemento es visible en diferentes orientaciones, lo que cambiará en los dispositivos móviles y en el escritorio, la orientación cambia al paisaje.
Clases de visibilidad de Foundation CSS Clase de detección de orientación:
- show-for-landscape : esta clase se utiliza para mostrar contenido en modo horizontal.
- show-for-retrato : esta clase se utiliza para mostrar contenido en modo vertical.
Sintaxis:
<div class="show-for-landscape"> Content </div> <div class="show-for-portrait"> Content </div>
Ejemplo : este ejemplo describe la orientación de la clase de visibilidad en Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Foundation CSS Visibility Classes
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<style>
img {
height: 80px;
width: 80px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Foundation CSS Visibility Classes Orientation Detection
</h3>
<div class="show-for-landscape">
<center>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png">
<h1>This image is shown on LandScape Mode</h1>
</center>
</div>
<br>
<div class="show-for-portrait">
<center>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190531152042/node1.png">
<h1>This image is shown on Portrait Mode.</h1>
</center>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, alternaremos el color de fondo según el tipo de orientación en Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Foundation CSS Visibility Classes </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css"> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h3> Foundation CSS Visibility Classes Orientation Detection </h3> <div class="show-for-landscape" style="background-color: pink;"> <h1> Pink is the backgroundColor for LandScape Mode </h1> </div> <br> <div class="show-for-portrait" style="background-color: yellow;"> <h1> Yellow is the backgroundColor Portrait Mode. </h1> </div> </center> </body> </html>
Producción:
Referencia : https://get.foundation/sites/docs/visibility.html#orientation-detection
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA