在JavaScript中检测基础的小/大使用

有没有一种方法可以使用Javascript检测a是处于“小”模式还是“大”模式？

是的，您可以创建如下函数：

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!");
}

那么就这样称呼它：

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媒体查询中，仅适用于小型（调整以适应）：

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

var getSize;

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

在某些浏览器中，getSize（）将返回一个带引号的值，因此使用if（getSize（）=“small”）不起作用。您可以通过使用此项来比较：

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

此方法的博客帖子：

你可以使用库，尽管它的名字，只适用于任何框架，包括基础。对于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);

---

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

处理媒体查询的默认方法有：

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

---

请参阅下面的“媒体查询”。

实际上有一个更好的方法：

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

---

更多信息。

非常好，发现这些函数非常有用。易于使用jQuery的

window.onresize=function（event）{}

Agree，更好。F6还可以使用

console.log（Foundation.MediaQuery.current）；//“小”、“大”等

以及

if（Foundation.MediaQuery.is（'small only'）{//True if small//False if medium或large}

等