Я использую условие Jquery if else с ($ (window) .width()
Это прекрасно работает, но когда ширина окна изменяется, условие не применяется автоматически, а мне нужно перезагрузить браузер, чтобы применить условие. Что поможет получить гладкий CSS медиа запросов, так изменения при изменении размера браузера.
jQuery(document).ready(function($) {
if ($(window).width() < 767) {
$('p').removeClass('blue');
$('p').addClass('green');
}
else {
$('p').addClass('red');
$('p').removeClass('blue');
}
});
.red {
color: red;
}
.green {
color: green
}
.blue {
color: blue
}
<p class="blue">Hello World</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Вы называете его на документ готов. Если вы хотите проверить его при каждом изменении размера, тогда используйте событие «изменить размер окна» ... В любом случае проверка ширины окна для получения ширины окна просмотра является неправильной практикой, используйте вместо этого [window.matchMedia()] (https: // разработчик .mozilla.org/EN-US/Docs/Web/API/Window/matchMedia). И ya, вы могли бы просто использовать запросы на CSS-медиа для этого ... –