Media detection JavaScript functions

media-detection.js

const breakpoints = {
    xs: 480,
    sm: 768,
    md: 1024,
    lg: 1280,
    xl: 1440
}

function minWidth(screensize){
    return window.matchMedia(`(min-width: ${screensize}px)`);
}

function maxWidth(screensize){
    return window.matchMedia(`(max-width: ${screensize}px`);
}

// Usage
// Check the device width less that medium
// if (!minWidth(breakpoints.screenMl).matches) { console.log('You are in XS or SM') }