Question

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

Answer 1

是的，你可以创建一个这样的函数：

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（）==＆＃34; small＆＃34;）不起作用。你可以用这个比较来解决这个问题：

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

相信此博文的帖子：http://adactio.com/journal/5429/

Answer 2

实际上还有更好的方法：

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

更多信息here。

Answer 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下的“媒体查询”。

Answer 4

您可以使用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);

免责声明：我是该图书馆的作者。

在Javascript中检测基础小/大用法

4 个答案: