How to use Media Queries in JavaScript

问题

I know little to nothing about JavaScript so I'm not even sure if my question makes sense. My point however is how to apply the same principle of media queries to change particular values on a script depending on the width of the screen.

In the following example, I'm using a scroll spy active menu with a negative scrolling of -100px for Header compensation. This offset is necessary because the header has a fixed position.

I need the offset value to change to 0px if window is smaller then 900px width, because at that point, Header position becomes relative.

$(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;
        }
    }
});

});

回答1:

You actually do have something similar to Media Queries in JS:

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

回答2:

You can define .resolution-check class in css when to be visible:

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

and then simply check in JS if that element is visible:

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

  // do stuff here

}

This way you can control media queries in one place, in CSS

回答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.');
    }
}

There is only a small problem with this, that is that older IE do not supports this.

This fixed with adding a libraries named polyfill .

回答4:

How to use Media Queries in JavaScript and replace div or image or text Proto Theme Logo Change on mobile

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'>" );
        }
        });

来源：https://stackoverflow.com/questions/28111826/how-to-use-media-queries-in-javascript

标签

javascript

jquery

css

scroll

media-queries