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

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

版本:

浏览量:158

最后更新:2021-09-07

应用标签:MAC 软件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 }');
});

更改日志:

2018-01-11

  • v0.1.1:添加选项监听器

2017-10-17

  • 更改使用 css 断点

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。