Как реализовать медиазапрос на js?

Question

[ligisayan]

Всем привет. Подскажите как условие скрипта:
$('.frame').each(function() { if (...) {...} });
реализовать для на разрешениях мобильного устройства, т.е.

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

Нужно его внутри повторно прописывать или медиа запрос можно как-то реализовать внутри цикла, чтобы не создавать повторные условия?

Answer 1

[mr-molodoy]

Не совсем ясно, что Вы имеете ввиду. Для чего Вам использовать цикл? Если Вы будете в цикле при каждой итерации проверять размер какого либо блока и плюс еще производить те или иные расчеты и / или манипуляции основываясь на этих данных, то готовьтесь к адским мучениям с производительностью.
Как Вы сами же и упомянули в javascript имеется событие на изменение размера окна браузера. В jQuery к нему можно обратится как:

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

или

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

Вот Вам для примера набросал код на jsfiddle который демонстрирует всю работу.
Красный квадрат должен изменять свой цвет на зеленый если размер окна Вы измените на 620, либо меньше пикселей в ширину и при этом поменяет свой цвет обратно, если вы увеличите ширину окна.

Код: https://jsfiddle.net/cxnesxej/2/
Результат в отдельном окне: https://jsfiddle.net/cxnesxej/2/embedded/result/

Comments

[ligisayan]

"Для чего Вам использовать цикл?"
mr-molodoy чтобы работать с содержимым, которое может быть любого размера

[mr-molodoy]

Немного, расширю свой ответ. Насколько я понимаю, Вы хотите отслеживать не размер непосредственно окна, а размер какого либо блока. Я правильно понимаю?
Если так то Вы можете отслеживать событие resize окна браузера точно так же как я описал. Только в обработчике, необходимо проверять не размер окна ( $(window).width() ), а размер необходимого блока.
После того как размер мы узнали нам необходимо определится с т.н breakpoint'ами - значения размеров окна, выходя за пределы которых мы должны производить какие-то манипуляции над элементами страницы и указать эти самые критерии в конструкции условия или нескольких условий по аналогии приведенного мною примера на jsfiddle (в нем breakpoint'ом является размер 620px).

Думаю, что по комментарию можно будет уловить принцип работы, но если потребуется более развернутый ответ я создам новую демо с более реальным применением и максимально его прокомментирую.

[ligisayan]

mr-molodoy: да, спасибо, был бы вам благодарен за более развернутый ответ! все правильно, я отслеживаю изменение размеров блока и при этом не одного

Answer 2

[Дмитрий Кравченко]

https://github.com/xoxco/breakpoints
Используй готовое решение

Answer 3

[anxieter]

Дабы не плодить подобные темы хотел бы написать свой вопрос в похожей тематике.
Прошу Вас помочь доработать скрипт. Скрипт ресайзит фоновую картинку согласно разрешению экрана. Однако я столкнулся с проблемой - на мобильниках, когда контент внутри блока с данным фоном больше, чем разрешение экрана, он обрезает этот самый контент.
Для этого я решил воспользоваться медиазапросом. А вот какой результат:
В ChromeMobile, FirefoxMobile, картинка обрезается. В SafariMobile, YandexMobile, AndroidMobile срабатывает - то есть фон растягивается по контенту ниже нижней границы экрана.
Где-то нужно его доработать, но не знаю как, чтобы срабатывал во всех браузерах.

<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');}

Значение 700px было поставлено просто наугад.