使用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)';

交换文档

码笔

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();