MENU


Matching Media Queries


RESETRUNFULL
<!DOCTYPE html><html><head></head><body><span></span><p></p><script>
    var mq=matchMedia(
             '(orientation:landscape) and (min-width: 600px)');document.querySelector("span").innerText = mq.matches;                                                                   // true or falsedocument.querySelector("p").innerText =
                       matchMedia('screen').media;  // screen
    mq.onchange = ()=>{     // fired only when mq.matches switches (true <-> false)
       document.querySelector("span").innerText = mq.matches;
    }</script></body></html>

falsescreen

RESETRUNFULL
<!doctype html><html lang="en"><head>
    <style>
        @media screen and (max-width: 500px), print{
            body {background:yellow;}
        }
    </style></head><body><script> console.log(
    document.styleSheets[0].cssRules[0].media.mediaText);    // screen and (max-width: 500px), print
         console.log(
    document.styleSheets[0].cssRules[0].media[0]);    // screen and (max-width: 500px)</script></body></html>