基础 CSS 交换

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

在本文中，我们将了解Foundation CSS 交换组件。这 组件帮助我们在媒体查询的帮助下加载响应式内容。现在，可能会出现一个问题，在 CSS 中我们有媒体查询来做同样的事情，那么使用 Interchange 有什么好处呢？原因是，在使用媒体查询时，网站会加载所有图像和组件，而不管它们在特定屏幕尺寸中的使用情况，但是当我们使用 Interchange 时，网站会加载特定屏幕尺寸所需的特定组件和图像。

例如， Interchange 组件只会为中等尺寸的屏幕加载中等尺寸的图像，而不是大尺寸和小尺寸的图像。因此，使用 Interchange 可以节省移动网络的带宽。现在，在本文中，我们将了解 Foundation CSS 中的 Interchange 组件。

基础 CSS 交换属性：

• data-interchange：该属性用于指定必须根据页面大小显示的所有图像或 HTML 文档。

1. 与图像一起使用：它有助于为特定尺寸的屏幕加载特定尺寸的图像。像大屏幕的大图像，小屏幕的小图像等等。

语法：在下面的语法中，图像路径是图像的相对或绝对路径，媒体查询可以是任何 CSS 媒体查询或 Foundation 断点。

data-interchange="[image path, media-query],
    [image path 2, media-query2], ..."

例子：

HTML

  

    
    
    
    
    

  

    Foundation CSS Interchange
    GeeksforGeeks
    
    
        $(document).foundation();
    

  

输出：

2. 与 HTML 一起使用：它有助于为特定尺寸的屏幕加载 HTML 文档。

语法：在下面的语法中，html-file-path 是 HTML 文档的相对或绝对路径，media-query 可以是任何 CSS 媒体查询或 Foundation 断点。

data-interchange="[html-file-path, media-query], [html-file-path 2, media-query2], ..."

例子：

HTML

  

    
    
    
    
    

  

    Foundation CSS Interchange
    GeeksforGeeks
    
    
    
        $(document).foundation();
    

  

输出：

注意：我们创建了文件名为“default.html”、“Small.html”、“medium.html”和“Large.html”的单个文件。因此，您还必须在本地系统中创建单个文件。

3. 与背景图像一起使用：在非图像元素上使用交换时，我们可以添加图像路径而不是 HTML 路径。这将根据屏幕大小更改元素的背景图像属性。

示例：在下面的示例中，我们使用了带有

标签的交换组件。

HTML

  

    
    
    
    
    

  

    Foundation CSS Interchange
    GeeksforGeeks
    
        
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of the Interchange component.
            It is published on GeeksforGeeks platform which 
            is a wonderful website for learning new 
        
        
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of the Interchange component.
            It is published on GeeksforGeeks platform which 
            is a wonderful website for learning new 
        
        
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of Interchange component.
            It is published on GeeksforGeeks platform which 
            is a wonderful website for learning new 
        
        
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of Interchange component.
            It is published on GeeksforGeeks platform which 
            is a wonderful website for learning new 
        
    
    
        $(document).foundation();
    

  

输出：

4. 命名媒体查询：下表列出了所有可用的命名媒体查询：

Query Name	Media Query
small	screen and (min-width: 0em)
medium	only screen and (min-width: 40em)
large	only screen and (min-width: 64em)
xlarge	only screen and (min-width: 75em)
xxlarge	only screen and (min-width: 90em)
portrait	screen and (orientation: portrait)
landscape	screen and (orientation: landscape)
retina	only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min–moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)

编程使用：如果需要以编程方式使用 Foundation，则必须传递选项对象中的规则集。

var element = $('.container');
var interchange = new Foundation.Interchange(element, {
    rules : [
        "path , media query",
        ...
    ]
});

例子：

HTML

  

    
    
    
    
    

  

    Foundation CSS Interchange
    GeeksforGeeks
    
        
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of the Interchange component.
            It is published in GeeksforGeeks platform which 
            is a wonderful website for learning new 
        
  
        
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of the Interchange component.
            It is published in GeeksforGeeks platform which 
            is a wonderful website for learning new 
        
  
        
            This is the sample text inside for the website.
            This is an article on Foundation CSS Interchange
            component and its use cases. This article helps
            you to understand the working and syntaxes of
            different properties of Interchange component.
            It is published in GeeksforGeeks platform which 
            is a wonderful website for learning new 
        
  
        
            This is the sample text inside for the website.
            This is a article on Foundation CSS Interchange
            component and it's use cases.This article helps
            you to understand the working and syntaxes of
            different properties of Interchange component.
            It is published in GeeksforGeeks platform which 
            is a wonderful website for learning new 
        
    
    
        var container = $('.container');
        var interchange = new Foundation.Interchange(container, {
            rules: [
"[https://media.geeksforgeeks.org/wp-content/uploads/20220314215029/bglarge.png, default]",
"[https://media.geeksforgeeks.org/wp-content/uploads/20220314215032/bgsmall.png, small]",
"[https://media.geeksforgeeks.org/wp-content/uploads/20220314215031/bgmedium.png, medium]",
"[https://media.geeksforgeeks.org/wp-content/uploads/20220314215029/bglarge.png, large]"
            ]
        });
        $(document).foundation();
    

  

输出：

参考： https://get.foundation/sites/docs/interchange.html