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.
El componente Responsive Embed facilita envolver los contenidos de medios incrustados, como videos, mapas, calendarios, etc., dentro del contenedor responsive incrustado, para 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 . La clase Relaciones de aspecto le permite cambiar la relación de aspecto de la inserción receptiva. La proporción predeterminada es 4:3. La clase .widescreen ayuda a cambiar la relación de aspecto del contenedor a 16:9 .
Foundation CSS Responsive Embed Clase de relación de aspecto:
- 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 : El siguiente ejemplo demuestra la clase Responsive Embed con una proporción predeterminada, es decir, 4:3 .
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 Responsive Embed Default </h3> <div class="responsive-embed "> <iframe width="420" height="315" src= "https://www.youtube.com/embed/bptRLm3OiV8"> </iframe> </div> </center> </body> </html>
Salida :
Relación de aspecto predeterminada de incrustación receptiva
Ejemplo : el siguiente ejemplo demuestra la clase de inserción receptiva con una relación de pantalla ancha, es decir, 16:9 .
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> Responsive Embed Widescreen Aspect Ratio </h3> <div class="responsive-embed widescreen"> <iframe width="420" height="315" src= "https://www.youtube.com/embed/bptRLm3OiV8"> </iframe> </div> </center> </body> </html>
Salida :
Relación de aspecto de pantalla ancha incrustada receptiva
Referencia : https://get.foundation/sites/docs/responsive-embed.html#aspect-ratios
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA