我有一组断点,每次通过一个断点时,我都想触发一个事件。目前,我正在使用$(document).resize(function(){})
,但这与我的CSS断点不匹配,无论我使用window
、document
或任何其他选择器。
是否有一种检测媒体查询被触发的方法?以下是我的当前代码:
$( window ).resize(
function() {
if( $(window).width() < 500 ) {
$(window).trigger("breakpoint-sm");
}
if( $(window).width() < 900 ) {
$(window).trigger("breakpoint-md");
}
}
);
$(window).on(
"breakpoint-md", function() {
if($(window).width() < 900) {
// this happens when below medium screen size
alert( "breakpoint reached" );
}
}
);
@media screen and (max-width: 500px) {
/* do mobile things */
}
@media screen and (max-width: 900px) {
/* do mobile things */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
如果有更简单的方法来确定断点是否向上或向下通过,我愿意听取建议。
谢谢!
window.MatchMedia
,当特定查询被触发时会被触发,就像这样。 - Rory McCrossan