Скрывать блоки на мобильном или десктопе

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

 Мы будем использовать медиа-запросы (media queries) для определения размеров экрана. Стандартный "разделитель" между мобильными и десктопными устройствами часто находится в районе 768px (ширина планшета в портретной ориентации). Вы можете настроить это значение под свои нужды.

/* === СКРЫТЬ НА МОБИЛЬНЫХ УСТРОЙСТВАХ === */
/* Этот класс будет скрывать элемент на экранах шириной 767px и меньше */
@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important; /* Используем !important, чтобы переопределить другие стили display */
  }
}

/* === СКРЫТЬ НА ДЕСКТОПНЫХ УСТРОЙСТВАХ === */
/* Этот класс будет скрывать элемент на экранах шириной 768px и больше */
@media (min-width: 768px) {
  .hide-on-desktop {
    display: none !important; /* Используем !important для надежности */
  }
}

/* === (ОПЦИОНАЛЬНО) ПОКАЗАТЬ ТОЛЬКО НА МОБИЛЬНЫХ === */
/* Этот класс будет показывать элемент ТОЛЬКО на экранах 767px и меньше */
.show-only-on-mobile {
  display: none !important; /* Скрыт по умолчанию (на десктопе) */
}
@media (max-width: 767px) {
  .show-only-on-mobile {
    display: block !important; /* Или inline, inline-block, в зависимости от элемента */
  }
}

/* === (ОПЦИОНАЛЬНО) ПОКАЗАТЬ ТОЛЬКО НА ДЕСКТОПНЫХ === */
/* Этот класс будет показывать элемент ТОЛЬКО на экранах 768px и больше */
.show-only-on-desktop {
  display: block !important; /* Или inline, inline-block, в зависимости от элемента. По умолчанию виден. */
}
@media (max-width: 767px) {
  .show-only-on-desktop {
    display: none !important; /* Скрываем на мобильных */
  }
}

 Как использовать:


 Просто добавьте соответствующий класс к HTML-элементу, который вы хотите скрыть:

<!-- Это изображение будет скрыто на мобильных устройствах -->
![Описание изображения](path/to/your/image.jpg)

<!-- Этот текст будет скрыт на десктопных устройствах -->
Этот текст виден только на мобильных.


<!-- Это изображение будет видно ТОЛЬКО на мобильных -->
![Мобильное изображение](path/to/another/image.jpg)

<!-- Этот блок будет виден ТОЛЬКО на десктопах -->

  Контент только для десктопа.

Пояснения:

-

	 @media (max-width: 767px): Эти стили применяются, когда ширина окна браузера составляет 767 пикселей или меньше.





-

	 @media (min-width: 768px): Эти стили применяются, когда ширина окна браузера составляет 768 пикселей или больше.





-

	 display: none;: Это свойство полностью удаляет элемент из потока документа. Он не только становится невидимым, но и не занимает места.





-

	 !important: Используется для повышения приоритета правила. В случае таких "утилитарных" классов, как эти, !important часто оправдан, чтобы гарантировать, что скрытие сработает, даже если у элемента есть другие стили display. Однако старайтесь использовать его с осторожностью.





-

	  (в классах : Вам может понадобиться изменить block на inline, inline-block, flex, grid и т.д., в зависимости от того, каким был исходный тип отображения элемента, который вы хотите показать. block является наиболее общим значением для видимых элементов.








 Настройка точки останова (breakpoint):

Значение 767px/768px — это распространенная точка останова, но вы можете изменить ее в соответствии с дизайном вашего сайта. Например, если вы считаете “мобильными” устройства с шириной до 600px, вы измените:

 max-width: 767px на max-width: 599px

 min-width: 768px на min-width: 600px


 Выберите те классы, которые наиболее точно описывают ваше намерение (hide-on-X или show-only-on-X).