使用 css 媒体查询触发 jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6461300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Triggering jquery with css media queries
提问by JCHASE11
I am using css media queries on my project to create a site that will work with any sized screen. I am looking to trigger difference jquery functions just like I would with css.
我在我的项目中使用 css 媒体查询来创建一个可以使用任何大小屏幕的站点。我希望像使用 css 一样触发差异 jquery 函数。
For example, If the browser size is between 1000px and 1300px, I would like to call the following function:
例如，如果浏览器大小在 1000px 和 1300px 之间，我想调用以下函数：
$('#mycarousel').jcarousel({
vertical: true,
scroll: 1,
auto: 2,
wrap: 'circular'
});
BUT when the browser size is below 1000px, the js would stop its processing. So on and so forth.
但是当浏览器尺寸低于 1000px 时，js 会停止处理。等等等等。
I'm not sure if this is possible, but perhaps there is an existing solution or plugin that creates different js environments based on browser window sizes. I suppose I could create conditional statements in some format. Any thoughts?
我不确定这是否可行，但也许有一个现有的解决方案或插件可以根据浏览器窗口大小创建不同的 js 环境。我想我可以以某种格式创建条件语句。有什么想法吗？
回答by Pointy
The Modernizrlibrary supports making direct JavaScript calls that evaluate media queries.
该Modernizr的库支持使该评估媒体查询直接调用JavaScript。
If you don't want to do that, you could have your different CSS rules drive some property of a hidden element, and you could then use ".css()" to check the value from jQuery. In other words, the rule for "bigger than 1000px wide" could set a hidden <div>to "width: 1000px", and you could then check
如果您不想这样做，您可以让不同的 CSS 规则驱动隐藏元素的某些属性，然后您可以使用“.css()”来检查来自 jQuery 的值。换句话说，“大于 1000 像素宽”的规则可以将隐藏设置<div>为“宽度：1000 像素”，然后您可以检查
if ( $("#widthIndicator").css("width") === "1000px") {
// whatever
Hereis a dumb jsfiddle demonstrating. Drag the middle separator bar left and right to see that the JavaScript code (in the interval timer) detects the change to effective "width" of the hidden element.
这是一个愚蠢的 jsfiddle 演示。左右拖动中间的分隔条，可以看到 JavaScript 代码（在间隔计时器中）检测到隐藏元素的有效“宽度”的变化。
If you refer to a responsive design then you could also trigger an existing element's property without adding markup to your html,for example
例如，如果您指的是响应式设计，那么您还可以触发现有元素的属性，而无需在 html 中添加标记
if ( $("#navigation li").css("float") === "none") {
回答by Sebastian
Using Modernizr, as Pointy pointed out, is pretty easy.
正如 Pointy 指出的那样，使用 Modernizr 非常简单。
Add the following javascript:
添加以下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();
});
That way the Modernizr Mediaquery detection is run ALSO when you resize the browser window - not only when the document gets loaded initially!
这样，当您调整浏览器窗口大小时，Modernizr Mediaquery 检测也会运行 - 不仅仅是在最初加载文档时！
回答by Putuko
I had a similar problem with some carousels that must be created on mobile, but destroyed in desktop... and I did not liked the solution of being checking window width in pixels, so I created a small function to "listen" when the mediaquery state changes, without the need of Modernizr.
我有一些必须在移动设备上创建但在桌面上销毁的轮播的类似问题......而且我不喜欢以像素为单位检查窗口宽度的解决方案，所以我创建了一个小函数来“侦听”媒体查询状态更改，无需 Modernizr。
You can define your own code in every state ("on entering mobile resolution", "on leaving desktop")... and there put your code.
您可以在每种状态下定义自己的代码（“进入移动分辨率时”、“离开桌面时”）……然后将您的代码放在那里。
Hope could be useful for someone else ;)
https://github.com/carloscabo/MQBE
(improvements and ideas are welcome ;)
希望对其他人有用；)
https://github.com/carloscabo/MQBE
（欢迎改进和想法；）
