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 hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. 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. 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.
The Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. Kitchen Sink Responsive Embed es un componente que puede agregar para envolver iframe , object , incrustar o video para hacer que estos elementos se escalen de manera receptiva. Responsive Embed permite mantener la relación de aspecto correcta independientemente del tamaño de la pantalla. Para garantizar que la relación de aspecto de la inserción siga siendo la misma independientemente del tamaño de la pantalla, envuelva el elemento de inserción en un contenedor con una clase .responsive-embed .
Foundation CSS Kitchen Sink Responsive Embed Class:
- predeterminado: esta es la proporción de incrustación (4:3) heredada, de forma predeterminada. Por lo tanto, cada vez que el usuario aplica una clase de inserción receptiva , la inserción receptiva obtiene la relación de aspecto de 4:3.
- widescreen: Foundation ofrece al usuario otra opción de relación de aspecto para la inserción receptiva, que es la relación de pantalla ancha o 16:9. Para aplicar una relación de aspecto de 16:9, agregue la clase .widescreen a la clase .responsive-embed .
Sintaxis :
<div class = "responsive-embed">
<iframe width = "" height = "" src = ""></iframe>
</div>
Ejemplo : este ejemplo describe la inserción receptiva del fregadero de cocina en Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Foundation CSS Kitchen Sink Responsive Embed</h3> <div class="responsive-embed"> <iframe width="420" height="315" src= "https://www.youtube.com/embed/bptRLm3OiV8"> </iframe> </div> </center> </body> </html>
Salida :
Integración receptiva del fregadero de la cocina
Las clases de relaciones de aspecto le permiten cambiar la relación de aspecto de la inserción receptiva. La proporción predeterminada es 4:3. Sin embargo, el usuario puede implementar la clase .widescreen para cambiar la relación de aspecto del contenedor a 16:9.
Ejemplo : este ejemplo describe la inserción receptiva del fregadero de cocina en Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Foundation CSS Kitchen Sink Responsive Embed </h3> <div class="responsive-embed widescreen"> <iframe width="420" height="315" src= "https://www.youtube.com/embed/bptRLm3OiV8"> </iframe> </div> </center> </body> </html>
Salida :
Fregadero de cocina Responsive Embed Widescreen
Referencia : https://get.foundation/sites/docs/kitchen-sink.html#responsive-embed
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA