5

有没有办法使用 Javascript 检测Foundation 网格是处于“小”模式还是“大”模式？

4

4 回答 4

11

是的，您可以创建这样的函数：

var isLarge, isMedium, isSmall;

isSmall = function() {
  return matchMedia(Foundation.media_queries['small']).matches && !matchMedia(Foundation.media_queries.medium).matches;
};

isMedium = function() {
  return matchMedia(Foundation.media_queries['medium']).matches && !matchMedia(Foundation.media_queries.large).matches;
};

isLarge = function() {
  return matchMedia(Foundation.media_queries['large']).matches;
};

然后像这样调用它：

if (isSmall()) {
  alert("Too small!");
}

if (isLarge()) {
  alert("Too big!");
}

if (isMedium()) {
  alert("Just right!");
}

另一种不是特定于基础的方式：

在您的 CSS 媒体查询中仅适用于小型（调整以适应）：

@media only screen and (max-width: 40.063em) {
  body:after {
    content: 'small';
    display: none;
  }
}

在您的 Javascript 中，使用函数来获取该元素的内容并进行比较：

var getSize;

getSize = function() {
  return window.getComputedStyle(document.body, ':after').getPropertyValue('content');
};

在某些浏览器中，getSize() 将返回一个被引用的值，因此使用 if (getSize() == "small") 不起作用。您可以通过使用它进行比较来解决这个问题：

if (getSize().indexOf("small") !== -1) {
  // do something
}

此方法归功于此博客文章：http: //adactio.com/journal/5429/

于 2014-07-16T01:35:58.020 回答
3

处理可用媒体查询的默认 Foundation5 方法是：

// Small queries
Foundation.utils.is_small_only();
Foundation.utils.is_small_up();

// Medium queries
Foundation.utils.is_medium_only();
Foundation.utils.is_medium_up();

// Large queries
Foundation.utils.is_large_only();
Foundation.utils.is_large_up();

// XLarge queries
Foundation.utils.is_xlarge_only();
Foundation.utils.is_xlarge_up();

// XXLarge queries
Foundation.utils.is_xxlarge_only();
Foundation.utils.is_xxlarge_up();

请参阅http://foundation.zurb.com/docs/javascript-utilities.html下的“媒体查询” 。

于 2015-07-16T17:29:56.987 回答
3

其实还有更好的办法：

if (Foundation.MediaQuery.atLeast('medium')) {
// True if medium or large
// False if small
}

更多信息在这里。

于 2016-12-11T09:28:02.740 回答
0

你可以使用Responsive Bootstrap Toolkit库，尽管它的名字，它只适用于任何框架，包括 Foundation。Foundation 的断点检测如下所示：

(function($, viewport){

    viewport.use('Foundation');

    if( viewport.is('small') ) {
        console.log('Matching: small');
    }

    if( viewport.is('>=medium') ) {
        console.log('Matching: medium, large and xlarge');
    }

    // You can also create a listener with debouncing that will perform an action
    // whenever window size changes.
    $(window).resize(
        viewport.changed(function(){
            console.log('Current breakpoint:', viewport.current());
        })
    );

})(jQuery, ResponsiveBootstrapToolkit);

免责声明：我是该库的作者。

于 2015-05-15T08:28:04.533 回答