使用 Foundation 6 的自定义交换查询

Question

我正在尝试为 Retina 笔记本电脑的 Interchange 添加自定义媒体查询，但它似乎没有启动。我确定有什么东西在错误的地方或者某处有错误的语法。有什么想法吗？

HTML:

<div 
class="responsive-bg" 
data-interchange="
    [http://brycekirk.com/man-mountain/small.jpg, small], 
    [http://brycekirk.com/man-mountain/medium.jpg, medium], 
    [http://brycekirk.com/man-mountain/large.jpg, large], 
    [http://brycekirk.com/man-mountain/xlarge.jpg, xlarge]
    [http://brycekirk.com/man-mountain/largeretina.jpg, largeretina]"></div>

CSS:

div.responsive-bg {height: 100vh; width: 100%; position: absolute; }

JS:

$(document).foundation();
Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';

Interchange Documentation

Codepen

Answer 1

它不起作用，因为您在 Foundation 初始化后添加自定义查询，您必须使用 Foundation 回流，或者您可以在初始化代码之前设置媒体查询。

Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';

$(document).foundation();

使用 Foundation 6 的自定义交换查询

Custom Interchange queries with Foundation 6

zurb-foundation

interchange

HTML:

CSS:

JS: