Intercambio CSS básico

Posted on by Rudeus Greyrat

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 para que se vean increíbles y puedan ser accesibles para cualquier dispositivo. 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. También tiene muchos componentes de sitios web que hacen que nuestro sitio web se vea más profesional.

En este artículo, aprenderemos sobre el componente Foundation CSS Interchange . Este componente nos ayuda a cargar contenido receptivo con la ayuda de consultas de medios. Ahora bien, puede surgir la pregunta, en CSS tenemos media queries para hacer lo mismo, entonces ¿cuál es la ventaja de usar Interchange? La razón es que, al usar consultas de medios, los sitios web cargan todas las imágenes y componentes independientemente de su uso en el tamaño de pantalla en particular, pero cuando usamos Interchange, el sitio web carga los componentes e imágenes específicos requeridos para el tamaño de pantalla en particular. 

Por ejemplo, el componente Intercambio solo cargará la imagen de tamaño mediano para la pantalla de tamaño mediano y no las imágenes de tamaño grande y pequeño. Por lo tanto, usar Interchange ahorra el ancho de banda de la red móvil. Ahora, en este artículo, aprenderemos sobre el componente Intercambio en Foundation CSS. 

Atributo de intercambio CSS básico:

  • intercambio de datos: este atributo se utiliza para especificar todas las imágenes o documentos HTML que deben mostrarse según el tamaño de la página.

1. Uso con imágenes: ayuda a cargar una imagen de tamaño particular para un tamaño particular de la pantalla. Como imágenes grandes para pantallas grandes, imágenes pequeñas para pantallas más pequeñas, etc.

Sintaxis: en la siguiente sintaxis, la ruta de la imagen es la ruta relativa o absoluta de la imagen y la consulta de medios puede ser cualquier consulta de medios CSS o punto de interrupción de Foundation.

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

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
    <h1>Foundation CSS Interchange</h1>
    <h2 style="color: green;">GeeksforGeeks</h2>
    <img data-interchange=
"[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]"
        alt="this is my img alt tag..." />
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

2. Uso con HTML: ayuda a cargar un documento HTML para un tamaño particular de la pantalla.

Sintaxis: en la siguiente sintaxis, la ruta del archivo html es la ruta relativa o absoluta del documento HTML y la consulta de medios puede ser cualquier consulta de medios CSS o punto de interrupción de Foundation.

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

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
    <h1>Foundation CSS Interchange</h1>
    <h2 style="color: green;">GeeksforGeeks</h2>
    <div data-interchange=
"[default.html, default],[Small.html, small],[medium.html, medium],[Large.html, large]">
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Nota: hemos creado los archivos individuales con los nombres de archivo «default.html», «Small.html», «medium.html» y «Large.html». Por lo tanto, también debe crear los archivos individuales en su sistema local.

3. Uso con imágenes de fondo: cuando se utiliza el intercambio en un elemento que no es una imagen, podemos agregar rutas de imágenes en lugar de rutas HTML. Esto cambiará la propiedad de imagen de fondo del elemento de acuerdo con los tamaños de pantalla. 

Ejemplo: en el siguiente ejemplo, hemos utilizado el componente de intercambio con la etiqueta <div>.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
    <h1>Foundation CSS Interchange</h1>
    <h2 style="color: green;">GeeksforGeeks</h2>
    <div data-interchange=
"[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]"
        alt="this is my img alt tag...">
        <p>
            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 
        </p>
        <p>
            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 
        </p>
        <p>
            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 
        </p>
        <p>
            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 
        </p>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

4. Consultas de medios con nombre: La siguiente tabla enumera todas las consultas de medios con nombre disponibles:

Nombre de consulta Consulta de medios
pequeña pantalla y (ancho mínimo: 0em)
medio  solo pantalla y (ancho mínimo: 40em)
largo solo pantalla y (ancho mínimo: 64em)
extra grande solo pantalla y (ancho mínimo: 75em)
extragrande solo pantalla y (ancho mínimo: 90em)
retrato pantalla y (orientación: vertical)
paisaje               pantalla y (orientación: horizontal)
retina solo pantalla y (-webkit-min-device-pixel-ratio: 2), solo pantalla y (min–moz-device-pixel-ratio: 2), solo pantalla y (-o-min-device-pixel-ratio: 2/1), solo pantalla y (proporción mínima de píxeles del dispositivo: 2), solo pantalla y (resolución mínima: 192 ppp), solo pantalla y (resolución mínima: 2 dppx)

Uso programático: se debe pasar el conjunto de reglas en los objetos de opciones si se necesita usar Foundation de forma programática.

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

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
    <h1>Foundation CSS Interchange</h1>
    <h2 style="color: green;">GeeksforGeeks</h2>
    <div class="container">
        <p>
            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 
        </p>
  
        <p>
            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 
        </p>
  
        <p>
            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 
        </p>
  
        <p>
            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 
        </p>
    </div>
    <script>
        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();
    </script>
</body>
  
</html>

Producción:

Referencia: https://get.foundation/sites/docs/interchange.html

Publicación traducida automáticamente

Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *