Как скрыть элемент в HTML на мобильных или небольших окнах?

Как скрыть элемент в HTML на мобильных или небольших окнах?

Я настраиваю веб-сайт, и когда я открываю его на мобильном телефоне или слишком мало изменяю размер страницы, логотип в верхней части страницы изменяет размеры таким образом, что выглядит плохо. Было бы здорово, если бы я мог изменить его размер, чтобы он выглядел хорошо, но в этот момент у меня заканчивается время и я просто хочу заставить его исчезнуть.

Я пытался и не смог написать сценарии JavaScript, чтобы он исчез. Я могу установить видимость скрытой, но у меня нет способа сделать это быстро, чтобы размер страницы был изменен, и я не могу определить, слишком ли мала веб-страница для начала. Я попытался использовать событие DOM onresize, но, похоже, оно не работает.

Вот моя попытка заставить HTML использовать функцию JS:

 {amp}lt;a href="website.com" class="header_logo" id="main_logo" onresize="fixBar()"{amp}gt; {amp}lt;img src="image.png"{amp}gt; {amp}lt;/a{amp}gt; 

Вот функция JS (которая находится ниже всего HTML-кода на странице), которая не работает:

 {amp}lt;script type="text/javascript"{amp}gt; function fixBar() { if (window.innerWidth {amp}lt; 400px) { document.getElementById("main_logo").style.visibility = "hidden"; } else { document.getElementById("main_logo").style.visibility = "visible"; } } {amp}lt;/script{amp}gt; 

Но, как вы видите, я все еще не знаю, как проверить, достаточно ли маленькое окно.

Кроме того, я работаю с ограничениями, которые очень затрудняют использование jQuery. Если это мой единственный вариант, я буду его использовать, но я бы предпочел не делать этого. Спасибо вам за помощь!

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector