Иногда нам нужно скрыть элемент дизайна на сайте, который на широком мониторе нужен для функций или для оформления. Но перейдя на мобильный просмотр, то просто этот элемент будет лишним, и здесь безусловно лучше его скрыть, так, чтоб он только не отображался на мобильных гаджет.
Здесь нам нужно заключить этот элемент под заданный класс с последствием прописывание под него @media в CSS. Это может быть блок или логотип с картинкой, что на мобильном аппарате не корректно смотрится, а просто считается лишним.
1. Для начало нужно заданный блок или элемент дизайна заключить в div, где все, что заключим не будет отображаться на небольших экранах.
Код
<div id="design_element">Как раз здесь располагается блок или дизайн, а также может быть информер $MYINF_5$</div>
Далее:
2. Нужно пройти в стилистику CSS и там уже выставить стили для данного скрытие данного элемента:
Код
@media screen and (min-width: 320px) and (max-width: 680px) { #design_element { display: none;} }
Далее:
3. Рассмотрим реальную работу @media, где начинаем с минимальной ширины 320, где при этой ширине автоматически скроется блок элемента, и максимальной 680. Но не забываем, что при 681 элемент появиться, где уже самостоятельно выставите значение.
Или зная под каким классом установлен блок или элемент дизайна, то вы уже зная класс можете поставить @media под заданный класс given_class к примеру.
Код
@media screen and (max-width: 680px) {
#given_class {
visibility: hidden;
display: none;
}
}
Также делают через js, но в большинстве предпочитают скрывать через стили CSS. Где теперь веб мастер самостоятельно может скрыть все, то что считает не нужным видеть с мобильных экранов. В основном это идут элементы дизайна, а также функционал, который востребован на широком мониторе, а на мобильных гаджет просто становиться лишним.
