Use css media queries as JavaScrip variables based on a DOM element

media-query-js-css.html

<script>
    /**
    * @description Encapsule all variables and funtions
    * @const mediaQueryHTML {Object} New DOM element with css heigth based on css break points
    */

    (function () {
        const mediaQueryHTML = document.createElement('div');
        const breakPoints = {
            0: 1, //xxs
            1: 2, //xs
            2: 3, //s
            3: 4, //m
            4: 5, //l
            5: 6, //xl
        };

        mediaQueryHTML.className = 'media-query-js';

        /**
        * @description Main function
        * Set max items based on breakpoints
        */
        function onDocumentReady() {
            document.querySelector('body').appendChild(mediaQueryHTML);
            const breakPoint = mediaQueryHTML.offsetHeight;
            const maxItems = breakPoints[breakPoint];
            console.log(maxItems);
        }

        document.readyState !== 'loading' ? onDocumentReady()
        : document.addEventListener('DOMContentLoaded', onDocumentReady);
    
    })();
</script>
<style>
    /* Media query js */
    .media-query-js {
        position: absolute;
        z-index: -1;
        height: 0;
        width: 0;
    }
    /* @include breakpoint(xs-up) { */
    @media (max-width: 375px) {
        .media-query-js {
            height: 1px;
        }
    }

    /* @include breakpoint(s-up) { */
    @media (max-width: 480px) {
        .media-query-js {
            height: 2px;
        }
    }

    /*  @include breakpoint(m-up) { */
    @media (max-width: 768px) {
        .media-query-js {
            height: 3px;
        }
    }

    /*  @include breakpoint(l-up) { */
    @media (max-width: 1024px) {
        .media-query-js {
            height: 4px;
        }
    }

    /* @include breakpoint(xl-up) { */
    @media (max-width: 1440px) {
        .media-query-js {
            height: 5px;
        }
    }
</style>