JQuery ID 中的媒体查询答案

【问题标题】：Media Queries in JQuery IDJQuery ID 中的媒体查询
【发布时间】：2015-05-19 07:02:42
【问题描述】：

如何在 Jquery 中将媒体查询插入到 ID 调用中？

例子：

$('#idname')
$('@media (max-width: 767px) { #idname }')

所以基本上它用那个媒体查询调用了#idname。用 JQuery 可以吗？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

假设你说的是你只选择元素，如果它最多767像素，你可以通过选择元素然后检查它的width来做到这一点，如果有多个元素你可以使用.filter 这样：

// ids are unique, but this also works for classes
var els = $("#idname").filter(function(i, el){ 
     return window.matchMedia('(max-width: 767px)').matches; 
});
els; // only matching elements

【讨论】：

$(el).width() > 767;是否对应css媒体查询值？
@AminMeyghani 对不起，你是对的，这会检查元素的宽度是否超过 767 像素，而不是如果页面宽度小于该宽度，我会更新答案。我需要睡觉：S

【解决方案2】：

你试图做的事情没有意义......

如果你想在 JavaScript 中使用 CSS 媒体查询：

尝试使用modernizr 中的mq 方法。

示例：Modernizr Media query doesn’t work when resize browser

另一个例子：http://craftedpixelz.co.uk/blog/conditional-js-with-modernizr-mq/

即

//加载modernizr mq方法（构建自定义下载包含来自http://modernizr.com/download/的媒体查询方法

然后一旦它被加载到页面（在脚本标签中），你可以这样做：

if (Modernizr.mq('(max-width: 767px)')) { // do stuff here }

【讨论】：