1

I'm trying to add a custom media query to Interchange for retina laptops, but it doesn't seem to be picking up. I'm sure something is in the wrong place or there's wrong syntax somewhere. Any ideas?

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

4

1 回答 1

4

它不起作用，因为您在 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();
于 2016-06-03T10:59:43.720 回答