使用css媒体查询触发jquery
我在我的项目中使用css媒体查询来创建一个可以在任何大小的屏幕上工作的网站。 我希望触发差异jquery函数，就像我用css一样。
例如，如果浏览器大小介于1000px和1300px之间，我想调用以下函数：
$('#mycarousel').jcarousel({ vertical: true, scroll: 1, auto: 2, wrap: 'circular' }); 但是当浏览器大小低于1000px时，js将停止其处理。 等等等等。
我不确定这是否可行，但也许现有的解决方案或插件可根据浏览器窗口大小创建不同的js环境。 我想我可以用某种格式创建条件语句。 有什么想法吗？
Modernizr库支持进行评估媒体查询的直接JavaScript调用。
如果您不想这样做，您可以使用不同的CSS规则驱动隐藏元素的某些属性，然后您可以使用“.css（）”来检查jQuery中的值。 换句话说，“大于1000px宽”的规则可以将隐藏的
为“width：1000px”，然后您可以检查
if ( $("#widthIndicator").css("width") === "1000px") { // whatever
这是一个愚蠢的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检测 – 不仅在文档最初加载时！
我有一些类似的问题，一些旋转木马必须在移动设备上创建，但在桌面上被破坏…我不喜欢以像素为单位检查窗口宽度的解决方案，所以我创建了一个小function来“监听”当媒体查询状态变化，无需Modernizr。
您可以在每种状态下定义自己的代码（“在输入移动分辨率时”，“在离开桌面时”）……然后放置您的代码。
希望可能对其他人有用;）
https://github.com/carloscabo/MQBE
（欢迎改进和想法;）