--- name: interchange url: /interchange title: Interchange ---
Interchange allows you to specify what specific content to display based on the user's current screen size. This is great for loading up a mobile-friendly component on small devices, and a more robust or heavier load component on desktops.
To set up Interchange, start with a container with the zf-interchange
directive.
A basic example of Interchange involves images. In the below example, we're loading images with a lower resolution (and thus a lower file size) on small screens, and progressively higher-res images on larger screens.
Note the values of the media
attributes on each item inside the container—these are the breakpoints defined in your Sass files. Check out the documentation for media queries to learn how these breakpoints can be changed.
Interchange can also switch between entire chunks of HTML. These can be loaded as partials (external HTML files), or by dropping the content right into the tag.
Note that partials are reloaded every time, meaning if the user's device scales from medium, to small, back to medium, the medium partial will be loaded twice.