基础 CSS 响应式嵌入

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松布局令人惊叹的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来令人惊叹，并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

在本文中，我们将了解 Foundation CSS 中的responsive-embed组件类。

Foundation CSS 中 responsive-embed 组件的函数是什么？

在现代，我们从不同屏幕尺寸的各种设备访问网站。因此，网站在不同的屏幕尺寸下看起来都很完美是很重要的。响应式嵌入组件对此有所帮助。该组件有助于将视频、日历和许多其他组件嵌入到响应式容器中，以便无论屏幕大小如何，它都能保持适当的大小（或纵横比）。

基础 CSS 响应式嵌入类：

• responsive-embed：这个类被添加到容器中，使内容成为响应式嵌入，即它根据纵横比变化。

句法：

 ... 

响应式嵌入组件的纵横比类：

• 宽屏：此类将容器的纵横比从默认的4:3值更改为16:9 。
• 垂直：此类将容器的纵横比更改为9:16 。
• square：此类将容器的纵横比更改为1:1 。
• 全景：该类将容器的纵横比更改为256:81。

注意：我们可以通过更改设置文件中的 $responsive-embed-ratios 映射来更改纵横比的默认值。例如，我们可以移除垂直和宽屏并添加我们自己的不同类。

示例：我们将 GFG YouTube 频道中的视频嵌入到网站中，并使用responsive-embed类根据纵横比调整其大小。

HTML

  

    
    
    
     
    
         

  

     
    GeeksforGeeks
    Foundation CSS Responsive Embed
    
    
        
            
                
                
            
        
    
     
    
        $(document).foundation();
    

输出：

参考链接： https://get.foundation/sites/docs/responsive-embed.html