Modernizr.mq in Vanille JS

Question

Ich versuche, Modernizr in meinem Projekt loszuwerden, aber ich kann nicht scheinen, zu verstehen oder einen Ersatz für die .mq-Funktion zu finden. Kann jemand mein Problem erklären oder eine nackte Lösung anbieten?

Answer 1

Gemäß Modernizr docs prüft mq, ob der Seitenstrom mit einer Medienabfrage übereinstimmt, die Sie übergeben, z. if (Modernizr.mq('(min-width: 900px)')) um zu testen, ob das Fenster mindestens 900 Pixel breit ist.

Auf vage-modernen Browsern (IE10 +, details here) können Sie dazu window.matchMedia verwenden. Beispiel von dieser Seite:

if (window.matchMedia("(min-width: 400px)").matches) { 
    /* the viewport is at least 400 pixels wide */ 
} else { 
    /* the viewport is less than 400 pixels wide */ 
} 

Answer 2

Modernizr ist Open Source - Sie genau sehen können, was es here tut. In modernen Browsern wird es fast immer nur window.matchMedia

sein