Foundation CSS Kitchen Sink 响应式嵌入

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

Kitchen Sink具有在我们的网站和应用程序中运行良好的基础元素。 Kitchen Sink Responsive Embed是一个组件，您可以添加它来包装iframe 、 object 、 embed或video以使这些元素响应式缩放。无论屏幕大小如何，响应式嵌入都允许保持正确的纵横比。为了确保嵌入的纵横比与屏幕大小无关，请将嵌入元素包装在具有.responsive-embed类的容器中。

Foundation CSS Kitchen Sink 响应式嵌入类：

• 默认值：默认情况下，这是继承的嵌入比例 (4:3)。因此，每当用户应用响应式嵌入类时，响应式嵌入的纵横比为 4:3。
• 宽屏： Foundation 为用户提供了另一种响应式嵌入的宽高比选择，即宽屏比例或 16:9。要应用 16:9 的纵横比，请将.widescreen类添加到.responsive-embed类。

语法：

示例：此示例描述了 Foundation CSS 中的 Kitchen Sink 响应式嵌入。

HTML

  

      
    
     

  

    
        

            GeeksforGeeks
        
        
Foundation CSS Kitchen Sink Responsive Embed
        

            
        
    

  

输出：

厨房水槽响应嵌入

纵横比类允许您更改响应式嵌入的纵横比。默认比例为 4:3。但是，用户可以实现.widescreen类将容器的纵横比更改为 16:9。

示例：此示例描述了 Foundation CSS 中的 Kitchen Sink 响应式嵌入。

HTML

  

      
    
     


    
        

            GeeksforGeeks
        
        

            Foundation CSS Kitchen Sink Responsive Embed
        
        

            
        
    

输出：

厨房水槽响应式嵌入宽屏

参考：https://get.foundation/sites/docs/kitchen-sink.html#responsive-embed