Медиа-запросы в jQuery: методы адаптивного веб-дизайна

  1. .resize(): этот метод позволяет привязать обработчик событий к событию изменения размера окна, что может быть полезно для настройки макета или функциональности вашей веб-страницы в зависимости от размеров экрана.

Пример:

$(window).resize(function() {
   // Code to be executed when the window is resized
});
  1. .matchMedia(): этот метод позволяет вам проверить, соответствует ли конкретный медиа-запрос CSS текущему размеру области просмотра. Он возвращает объект MediaQueryList, который можно использовать для прослушивания изменений в статусе медиа-запроса.

Пример:

if (window.matchMedia("(max-width: 600px)").matches) {
   // Code to be executed when the viewport width is 600px or less
}
  1. .media()(устарело): этот метод использовался в старых версиях jQuery для проверки соответствия определенному медиазапросу CSS. Однако он устарел и больше не рекомендуется к использованию.

Обратите внимание: хотя jQuery можно использовать для обработки медиа-запросов, стоит отметить, что современный CSS с медиа-запросами обычно является предпочтительным подходом для адаптивного веб-дизайна.