如何将此媒体查询转换为 jquery？

Posted 2023-03-06

【中文标题】如何将此媒体查询转换为 jquery？

【英文标题】：How to convert this media query to jquery?

【发布时间】：2016-03-30 17:10:01

【问题描述】：

我想编写 jquery 代码，当我的网站通过移动设备加载时显示所有子菜单。此代码存在于 Bootstrap.css 文件中。请指教。

        @media screen and (max-width: 768px)          
      ul.nav li.dropdown ul.dropdown-menu display: block; 

【参考方案1】：

请记住 $(window).width() 和 CSS 计算的宽度因滚动条而不同，在某些情况下 .innerWidth 会起作用，但是这也是不依赖的东西。

如果不需要 IE9 支持，那么您可以使用 window.matchMedia() (MDN documentation)。

    if (window.matchMedia('(max-width: 768px)').matches) 
        $("ul.nav li.dropdown ul.dropdown-menu").show();
     else 
        $("ul.nav li.dropdown ul.dropdown-menu").hide();
    

window.matchMedia与CSS媒体查询完全一致，浏览器支持相当不错：http://caniuse.com/#feat=matchmedia

使用 Modernizr：

Modernizr 是一个基于 JS 的库，如果你需要支持更多的浏览器可以使用Modernizr's mq method，它支持所有能够理解 CSS 媒体查询的浏览器。

if (Modernizr.mq('(max-width: 768px)')) 
    $("ul.nav li.dropdown ul.dropdown-menu").show();
 else 
    $("ul.nav li.dropdown ul.dropdown-menu").hide();

Source

【讨论】：

这是一个完整的答案。谢谢。

@programmer138200 很高兴它有帮助，请考虑投票并将其标记为正确答案。

【参考方案2】：

if ($(window).width() <= 768)
    $('ul.nav li.dropdown ul.dropdown-menu').css('display', 'block');

【参考方案3】：

本文最佳解决方案：http://www.sitepoint.com/javascript-media-queries/

var mq = window.matchMedia( "(min-width: 500px)" );
if (mq.matches) 
    // window width is at least 500px

else 
    // window width is less than 500px