Как сделать отзывчивую боковую панель

Question

Я сделал боковую панель на своем веб-сайте, но понял, что она не отвечает, и я не знал, как сделать ее отзывчивой. Может ли кто-нибудь рассказать мне, как сделать отзывчивую боковую панель, как в YouTube.

Answer 1

Что ж, если вы хотите, чтобы ваш сайт реагировал "легко", вам следует рассмотреть возможность создания сетки (Bootstrap).

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

Answer 2

Добавьте медиа-запрос к вашему CSS.

Медиа-запросы на MDN:

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

Это будет зависеть от того, как структурирован ваш CSS и что вы хотите сделать, но следующее скроет вашу боковую панель (использование класса .sidebar на экранах размером меньше 768 pixels).

@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

Это позволит скрыть все элементы с помощью класса .sidebar на экране размером 768 пикселей и менее. Вы можете изменить max-width на min-width, чтобы применить его к экранам с размерами, превышающими размеры экрана, например, для настольных компьютеров и т. Д.