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

Вот 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).

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