How to get the media query of your page

getMediaQuery.css

body #currentMediaQuery {
    display: none;
}

@media only screen and max-width 479px {
    body #currentMediaQuery {
        font-family: xxs;
    }

}

@media only screen and min-width 480px {
    body #currentMediaQuery {
        font-family: xs;
    }

}

@media only screen and min-width 768px {
    body #currentMediaQuery {
        font-family: sm;
    }

}

@media only screen and min-width 992px {
    body #currentMediaQuery {
        font-family: md;
    }

}

@media only screen and min-width 1310px {
    body #currentMediaQuery {
        font-family: lg;
    }

}

getMediaQuery.js

var getMediaQuery = function () {
    var id = "currentMediaQuery",
        elem, state, div;
    if(!document.getElementById(id)) {
        div = document.createElement("div");
        div.id = id;
        document.body.appendChild(div);
    }
    elem = document.getElementById(id);
    if (elem.currentStyle) {
        state = elem.currentStyle.fontFamily;
    } else if (window.getComputedStyle) {
        state = window.getComputedStyle(elem).getPropertyValue("font-family");
    }

    return state;
};