Как сбросить отображение в div после изменения размера устройства

avatar
adastani33
8 августа 2021 в 18:20
93
1
1

Это мой код, и он горизонтальный на экране рабочего стола, а на телефоне - вертикальный, а кнопка x (closebtn) отображается только на телефоне и закрывает строку меню. Как автоматически отобразить его снова после изменения размера страницы до размера рабочего стола?

function oty() {
  document.getElementById("tab").style.display = "none";
}
<div class="icon-bar" id="tab">
  <button class="closebtn" onclick="oty()">X</button>
  <button class="tablink">Home</button>
  <button class="tablink">News</button>
  <button class="tablink">Contact</button>
  <button class="tablink">About</button>
    </div>
Источник

Ответы (1)

avatar
Bumhan Yu
8 августа 2021 в 18:33
2

РЕКОМЕНДУЕТСЯ: придерживаться CSS @media

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

@media screen and (max-width: 1024px) { // Adjust the break-point size as needed
  #tab {
    display: none;
  }
}

Не рекомендуется: прослушайте событие resize и проверьте размер области просмотра

Хотя я настоятельно не рекомендую использовать JavaScript для чего-то, для чего создан CSS, с JavaScript это возможно. Попробуйте сделать следующее.

  1. Добавить прослушиватель событий resize в окно: (например, window.addEventListener('resize', handleResize))
  2. Напишите функцию, которая переключает видимость вашего элемента tab.
  3. Рассмотрите возможность добавления обработчика дроссельной заслонки, чтобы предотвратить чрезмерную активацию событий.
adastani33
9 августа 2021 в 08:19
0

да, я вижу, но после того, как я это сделал, ничего не произошло, и из элемента проверки я понял, что это потому, что команда java-скрипта предпочтительнее, чем css(@media screen and (min-width: 900px)) есть ли какое-либо решение для этого или я должен изменить код полностью

Bumhan Yu
9 августа 2021 в 14:51
0

На основе кода, которым вы поделились, нажатие кнопки .closebtn скроет его родительский div #tab. После этого вы должны прослушивать событие изменения размера окна, чтобы восстановить его видимость в зависимости от ширины области просмотра. См. этот ответ Опять же, я бы не советовал этого делать. Я рекомендую удалить элемент кнопки .closebtn и использовать преимущества CSS для переключения видимости #tab. См. это руководство.