基础 CSS 厨房水槽交换

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

Kitchen Sink是 Foundation CSS 中的一个页面，其中列出了所有主要组件及其代码。它包含每个组件的所有基本模板及其代码。 Foundation CSS 中的交换组件在创建响应式网站设计时很有用。它有助于根据屏幕尺寸在同一网站上加载不同的网页布局或不同的图像。使用这个组件，我们可以加载大屏幕尺寸的大尺寸图像，中等屏幕尺寸的中尺寸图像，以及小屏幕尺寸的小尺寸图像。

Foundation CSS Kitchen Sink 交换属性：

• data-interchange：该属性以数组的形式获取需要渲染的图像/HTML 页面的所有文件路径以及它们的媒体查询。

语法：

示例：下面的示例描述了 Foundation CSS 中的 Kitchen Sink Interchange，我们为不同的屏幕尺寸添加了不同尺寸的图像。

HTML

  

    Foundation CSS Kitchen Sink Interchange
    
    
    
    
        Foundation CSS Kitchen Sink Interchange
    

  
 
    
    
    
    
    
    
        $(document).foundation();
    

  

输出：

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