• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как скрыть элемент блока для мобильных экранах (Как скрывать блок div и элемент дизайна сайта на мобильных)
Как скрыть элемент блока для мобильных экранах
Kosten
Дата: Среда, 2020-07-22, 23:20 | Сообщение 1
Оффлайн
Администраторы
Сообщений:27204
Награды: 61


Иногда нам нужно скрыть элемент дизайна на сайте, который на широком мониторе нужен для функций или для оформления. Но перейдя на мобильный просмотр, то просто этот элемент будет лишним, и здесь безусловно лучше его скрыть, так, чтоб он только не отображался на мобильных гаджет.

Здесь нам нужно заключить этот элемент под заданный класс с последствием прописывание под него @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. Где теперь веб мастер самостоятельно может скрыть все, то что считает не нужным видеть с мобильных экранов. В основном это идут элементы дизайна, а также функционал, который востребован на широком мониторе, а на мобильных гаджет просто становиться лишним.
Прикрепления: 9651039.jpg(33.2 Kb)
Страна: (RU)
Kosten
Дата: Среда, 2020-07-22, 23:29 | Сообщение 2
Оффлайн
Администраторы
Сообщений:27204
Награды: 61


Если смотреть по работе javascript, то в сети аналогичного скрипта не найти, так как разные элементы скрываю. Здесь показано, это как скрывать блок div в зависимости от разрешения экрана? И здесь вашему вниманию вариант, с использованием javascript.

Стили:

Код
<style>
    body.mobile .no-mobile { display: none; }
</style>

Далее:

Javascript:

Код
<body>
    ...
    <div class="no-mobile">
       ...
    </div>
    ...
    <script>
        if(window.innerWidth < 800) {
            var body = (document.getElementByTagName("body"))[0];
            body.className = "mobile";
        }
    </script>
</body>

Далее:

Без javascript не обойтись!

Пример для раздумий:

Код
<script>
    if(window.innerWidth < 800)
    {
        var divS = new Array("id_2", "id_4");
        alert("div'ы " + divS + " не показываются");
    }
</script>

<div id="id_1">ID 1</div>
<div id="id_2">ID 2</div>
<div id="id_3">ID 3</div>
<div id="id_4">ID 4</div>
<div id="id_5">ID 5</div>

Где CSS можем задействовать, чтобы скрыть или отобразить элементы страницы. Это только работает на адаптивном дизайн сайте, чтобы показать определенные элементы, которые можно взаимодействовать только с большим размером экрана для удобства пользователей.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как скрыть элемент блока для мобильных экранах (Как скрывать блок div и элемент дизайна сайта на мобильных)
  • Страница 1 из 1
  • 1
Поиск: