使用Foundation 6进行自定义交换查询

Question

我正在尝试为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 reflow，或者您可以在初始化代码之前设置媒体查询。

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

$(document).foundation();