与Foundation 6的自定义交换查询

Question

我试图添加一个自定义媒体查询到交换视网膜笔记本电脑，但它似乎没有得到重视。我肯定有些东西在错误的地方，或者哪里有错误的语法。有什么想法吗？

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; }

联署材料：

$(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

它无法工作，因为您是在基础初始化之后添加自定义查询，您必须使用基金会再流，或者可以在init代码之前设置媒体查询。

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

$(document).foundation();