如何在JavaScript中使用媒体查询(How to use Media Queries in J

我知道几乎一无所知的JavaScript，所以我甚至不知道我的问题是有道理的。 但我的观点是如何应用的媒体查询同样的原理来改变取决于屏幕的宽度脚本特定值。

在下面的例子中，我使用的是-100px为标题补偿负滚动滚动间谍活动菜单。 该偏移是必要的，因为报头具有一个固定的位置。

我需要的偏移值来改变为0px如果窗口较小然后900px宽度，因为在这一点上，头位置变得相对。

$(document).ready(function () {
$(window).scroll(function () {

    var y = $(this).scrollTop();

    $('.link').each(function (event) {
        if (y >= $($(this).attr('href')).offset().top - 100) {
            $('.link').not(this).removeClass('active');
            $(this).addClass('active');
        }
    });

});

}）;

$(function () {
$('a[href*=#]:not([href=#])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: (target.offset().top - 100)
            }, 850);
            return false;
        }
    }
});

}）;

Answer 1:

事实上，你确实有类似的媒体查询在JS的东西：

if (matchMedia("(min-width: 900px)").matches) {
  // the viewport is at least 900 pixels wide
}

Answer 2:

您可以定义.resolution-check的CSS类时，可以看到：

@media only screen and (max-width: 900px) {
  .resolution-check {
    display: block;
  }
}

然后简单地检查JS如果该元素是可见的：

if ($('.resolution-check').is(':visible')) {

  // do stuff here

}

这样，您就可以控制媒体查询在一个地方，在CSS

Answer 3:

function checkMatchMedia(pQuery) {
    if (!window.matchMedia) {return false;}
    if (window.matchMedia(pQuery).matches) {return true;}
    return false;
}

var vIsOK = checkMatchMedia("(min-width: 500px)");
if (vIsOK) {
    console.log('window width is at least 500px');
} else {
    if (window.matchMedia) {
        console.log('window width is less then 500px');
    } else {
        console.log('Please include Polyfill.');
    }
}

只有一个小问题，这一点，那就是旧的IE浏览器不支持此功能。

这种固定加入一个名为库填充工具 。

Answer 4:

如何使用媒体查询JavaScript和更换手机的div或图片文字原主题标识选择

jQuery(function($){ 
      if (window.matchMedia("(max-width: 500px)").matches) {
    $( ".vc_responsive .logo > a > img " ).replaceWith( "<img class='img-responsive standard-logo' src='your URL' alt='Xtreme'>" );
        }
        });

文章来源: How to use Media Queries in JavaScript