How to implement a media query in js?

Question

css

Hello. Tell me how the condition of the script: implement for on the permissions of the mobile device, i.e.
$('.frame').each(function() { if (...) {...} });

$(window).resize(function(){
   if ($(window).width() <= 1024) { 
          // условие для мобильных устройств
   }    
});

Do I need to re-write it inside or can the media query be somehow implemented inside the loop so as not to create repeated conditions?

Answer 1

It's not entirely clear what you mean. Why would you use a cycle? If you check the size of a block in a loop at each iteration and also perform certain calculations and / or manipulations based on this data, then get ready for hellish torment with performance.
As you yourself mentioned in javascript there is an event for changing the size of the browser window. In jQuery it can be accessed as:

$(window).resize(function () {
    console.log( $( window ).width() ); // Запишем в консоль новый размер
});

or

$(window).on('resize', function () {
    console.log( $( window ).width() ); // Запишем в консоль новый размер
});

For example, I sketched a jsfiddle code for you that demonstrates all the work.
The red square should change its color to green if you resize the window to 620 or less pixels wide and change back if you increase the window width.
Code: https://jsfiddle.net/cxnesxej/2/
Result in a separate window: https://jsfiddle.net/cxnesxej/2/embedded/result/

Answer 2

https://github.com/xoxco/breakpoints
Use a ready-made solution

Answer 3

In order not to produce similar topics, I would like to write my question in a similar topic.
Please help me improve the script. The script resizes the background image according to the screen resolution. However, I ran into a problem - on mobile phones, when the content inside a block with a given background is larger than the screen resolution, it cuts off this very content.
To do this, I decided to use a media query. And here is the result:
In ChromeMobile, FirefoxMobile, the picture is cropped. In SafariMobile, YandexMobile, AndroidMobile it works - that is, the background is stretched over the content below the bottom of the screen.
Somewhere it needs to be finalized, but I don’t know how to make it work in all browsers.

<section class="intro fullheight">
   ....content....
</section>

var wheight = $(window).height();
            var width = $(window).width();
            
            if (width => '768'){
              $('.fullheight').css('height', wheight);
              $(window).resize(function(){
                wheight = $(window).height();			
                $('.fullheight').css('height', wheight);
              }) 	
            } else {$('.fullheight').css('height', '700px');}

The 700px value was just random.