用于 Window.matchMedia API 的 jQuery 插件 - matchMedia.js

版本:

浏览量:1115

最后更新：2021-09-07

应用标签：MAC 软件 git Jquery插件

推荐指数:

查看演示点击下载

详细信息

matchMedia.js 是Window.matchMedia() Web API的 jQuery 插件，允许您在屏幕大小与指定的媒体查询字符串匹配时执行自定义函数。

Window.matchMedia() API 返回一个新的 MediaQueryList 对象，表示指定媒体查询字符串的解析结果。

安装：

# NPM
$ npm install jquery-matchmedia --save

如何使用它：

1. 在 jQuery JavaScript 库之后插入 jquery.matchMedia.min.js 或 jquery.matchMedia.polyfill.min.js（包括 polyfill），你就可以开始了。

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
</script>
<script src="jquery.matchMedia.js"></script>

2. 在 JavaScript 或 CSS 中设置媒体查询规则如下：

$.mq.action('(min-width: 40em)');<br>

html:before {
  display: none;
  content: '{"xs" : "(max-width: 47.9375em)", "sm": "(min-width: 48em) and (max-width: 61.9375em)", "md": "(min-width: 62em) and (max-width: 74.9375em)", "lg": "(min-width: 75em)"}';
}

3.当媒体查询规则为真或假时执行自己的函数。

$.mq.action('xs', function () {
  $('.js-test1').text('xs');
}, function () {
  console.log('xs out');
});
 
$.mq.action('sm', function () {
  $('.js-test1').text('sm');
}, function () {
  console.log('sm out');
});
 
$.mq.action('md', function () {
  $('.js-test1').text('md');
}, function () {
  console.log('md out');
});
 
$.mq.action('lg', function () {
  $('.js-test1').text('lg');
}, function () {
  console.log('lg out');
});
 
$('.js-test2').mq('(max-width: 900px)', function () {
  $(this).css('color', 'green').text('@media (max-width: 900px) { true }');
}, function () {
  $(this).css('color', 'red').text('@media (max-width: 900px) { false }');
});