Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
En este artículo, aprenderemos sobre la clase de componente incrustado receptivo en Foundation CSS.
¿Cuál es la función del componente de inserción receptivo en Foundation CSS?
En la actualidad, accedemos a sitios web desde varios dispositivos con diferentes tamaños de pantalla. Por lo tanto, es esencial que el sitio web se vea perfecto en diferentes tamaños de pantalla. El componente de inserción sensible ayuda en eso. Este componente ayuda a incrustar componentes como video, calendario y muchos otros dentro de un contenedor receptivo para que mantenga el tamaño adecuado (o relación de aspecto) independientemente del tamaño de la pantalla.
Clase de incrustación receptiva CSS de Foundation:
- responsive-embed: esta clase se agrega al contenedor para que el contenido sea responsive incrustado, es decir, cambia según la relación de aspecto.
Sintaxis:
<div class="responsive-embed"> ... </div>
Clases de relación de aspecto del componente incrustado receptivo:
- widescreen: esta clase cambia la relación de aspecto del contenedor a 16:9 desde el valor predeterminado de 4:3 .
- vertical: esta clase cambia la relación de aspecto del contenedor a 9:16 .
- cuadrado: esta clase cambia la relación de aspecto del contenedor a 1:1 .
- panorama: esta clase cambia la relación de aspecto del contenedor a 256:81.
Nota: Podemos cambiar los valores predeterminados de las relaciones de aspecto cambiando el mapa $responsive-embed-ratios en su archivo de configuración. Por ejemplo, podemos eliminar la pantalla vertical y panorámica y agregar diferentes clases propias.
Ejemplo: incrustamos un video del canal de YouTube de GFG en el sitio web y usamos la clase de incrustación receptiva para cambiar su tamaño de acuerdo con la relación de aspecto.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> </head> <body> <h2 style="color:green;">GeeksforGeeks</h2> <strong>Foundation CSS Responsive Embed</strong> <br/> <div class="row"> <div class="medium-8 columns"> <div class="responsive-embed widescreen"> <iframe width="661" height="372" src= "https://www.youtube.com/embed/XsfSQgAnVBg" frameborder="0" allowfullscreen> </iframe> </div> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Enlace de referencia: https://get.foundation/sites/docs/responsive-embed.html
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA