我在我的项目中使用 css 媒体查询来创建一个适用于任何尺寸屏幕的网站。我希望像使用 css 一样触发不同的 jquery 函数。
例如，如果浏览器大小在1000px到1300px之间，我想调用如下函数：
$('#mycarousel').jcarousel({
vertical: true,
scroll: 1,
auto: 2,
wrap: 'circular'
});
但是当浏览器大小低于 1000px 时，js 会停止处理。以此类推。
我不确定这是否可能，但也许有一个现有的解决方案或插件可以根据浏览器窗口大小创建不同的 js 环境。我想我可以以某种格式创建条件语句。有什么想法吗？
【问题讨论】：
标签： jquery window conditional-statements media-queries
我遇到了类似的问题，一些轮播必须在移动设备上创建，但在桌面上被销毁......我不喜欢以像素为单位检查窗口宽度的解决方案，所以我创建了一个小功能来“收听”当媒体查询状态发生变化时，无需 Modernizr。
您可以在每种状态下定义自己的代码（“在进入移动分辨率时”、“在离开桌面时”）...然后将您的代码放在那里。
希望对其他人有用;)
https://github.com/carloscabo/MQBE
（欢迎改进和提出想法；）
【讨论】：
Modernizr 库支持直接调用 JavaScript 来评估媒体查询。
如果您不想这样做，您可以让不同的 CSS 规则驱动隐藏元素的某些属性，然后您可以使用“.css()”来检查来自 jQuery 的值。换句话说，“大于1000px宽”的规则可以将隐藏的<div>设置为“width: 1000px”，然后你可以检查
if ( $("#widthIndicator").css("width") === "1000px") {
// whatever
Here 是一个愚蠢的 jsfiddle 演示。左右拖动中间的分隔条，可以看到 JavaScript 代码（在间隔计时器中）检测到隐藏元素的有效“宽度”的变化。
如果您指的是响应式设计，那么您也可以触发现有元素的属性，而无需在 html 中添加标记，例如
if ( $("#navigation li").css("float") === "none") {
【讨论】：
正如 Pointy 指出的那样，使用 Modernizr 非常简单。
添加以下javascript：
$(document).ready(function() {
function doneResizing() {
if(Modernizr.mq('screen and (min-width:768px)')) {
// action for screen widths including and above 768 pixels
}
else if(Modernizr.mq('screen and (max-width:767px)')) {
// action for screen widths below 768 pixels
}
}
var id;
$(window).resize(function() {
clearTimeout(id);
id = setTimeout(doneResizing, 0);
});
doneResizing();
});
这样，Modernizr Mediaquery 检测也会在您调整浏览器窗口大小时运行 - 不仅是在最初加载文档时！
【讨论】：