Match media queries

Match media queries

I'm a beginner and trying to make a submenu animate in different ways depending on media queries. It should slide out from left (more than 768px width of a browser) and slide down in mobile mode.

How can I match media queries from css? This code won't trigger if resizing. 
$(window).on('resize',function() {
    if ($(window).width() > 768 {
        $('ul#main-menu li').mouseenter(function () {
            $('ul.sub-menu', this).stop().delay(300).fadeIn(150);
        }).mouseleave(function () {
            $('ul.sub-menu', this).stop().hide();
        });
    }
    else{
    // smaller than 768px
    }
});