Как скрыть элемент в css при разрешении экрана
Перейти к содержимому

Как скрыть элемент в css при разрешении экрана

  • автор:

Скрытие элементов при маленьком разрешении экрана

Author24 — интернет-сервис помощи студентам

Имеется сайт: http://альфа-инвест.рф
Вверху есть обычное меню и кнопка вызывающая боковое меню.
Как сделать, чтобы при разрешении экрана, например меньше 800×600, отображалась только кнопка вызывающая боковое меню, а при разрешении больше этого значения отображалось только основное меню?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Перенос строки при слишком маленьком разрешении экрана
Всем привет. Делаю адаптивную верстку. Имеется шапка сайта, navbar реализован li-тегами. Дело в.

Как убрать блок div при маленьком разрешении экрана
Есть сайт, выполнен в резиновом стиле, если пользователь с разрешением 1024×768 и выше, то все.

Отсечение края картинки на маленьком разрешении экрана
навеяло отсюда: https://www.cyberforum.ru/html/thread647206.html А вот подскажите: вешаю.

При маленьком разрешении сайт по левому краю
Шапка сайта 100%, и на больших экранах нормально отображается. Область контента фиксированная.

Регистрация: 22.02.2012
Сообщений: 114

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
.top_menu{ // селектор верхнего меню display: block; } .sandwich_menu_button{ // селектор кнопки бокового меню display: none; } @media only screen and (max-width : 800px){ .sandwich_menu_button{ // селектор кнопки бокового меню display: block !important; } .top_menu{ // селектор верхнего меню display: none !important; } }

Регистрация: 08.05.2017
Сообщений: 115

Отключаешь отображение гамбургерного меню по умолчанию.

Включаешь его и выключаешь меню которое строкой, если ширина экрана меньше 800 пикселей.

1 2 3 4 5 6 7 8 9 10 11 12
#header .news-search-menu { display: none; } @media screen and (max-width: 800px) { #header nav.main-nav > ul { display: none; } #header .news-search-menu { display: block; } }

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

При разрешении экрана меньше минимального — фон участка, вышедшего за пределы экрана, исчезает
При разрешении экрана меньше минимального — фон участка, вышедшего за пределы экрана, исчезает.

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

Разная шапка сайта при разном разрешении экрана
Здравствуйте. tehreg.ru Как можно реализовать — Разная шапка сайта при разном разрешении.

Блок не меняет размеры при разном разрешении экрана
Добрый день, как то уже обращался с похожей проблемой. Есть сайт http://testhtml.besaba.com/.

Или воспользуйтесь поиском по форуму:

Как скрывать блок div в зависимости от разрешения экрана?

Для решения подобных проблем в CSS есть свойство @media :

@media screen and (max-width:350px) < .object < display: none; >> 

Отслеживать
ответ дан 5 фев 2017 в 8:11
user232857 user232857

Как вариант, с использованием javascript

 body.mobile .no-mobile . 
.
. if(window.innerWidth

Отслеживать
ответ дан 29 фев 2012 в 16:08
chernomyrdin chernomyrdin
4,188 15 15 серебряных знаков 16 16 бронзовых знаков
спасибо! но что-то не выходит. body.mobile .no-mobile < display: none;>.glavn .no-mobile

if(window.innerWidth
1 мар 2012 в 8:48

использовать для таких целей JS не есть хорошо, используйте уже заложенные @media queries в CSS тем самым снимите лишнюю нагрузку на браузер.

17 фев 2017 в 6:07

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

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

 if(window.innerWidth 
ID 1
ID 2
ID 3
ID 4
ID 5

З.Ы. Пример!

Отслеживать
ответ дан 29 фев 2012 в 12:25
9,350 3 3 золотых знака 25 25 серебряных знаков 44 44 бронзовых знака
Спасибо, Palmervan! Буду думать)
29 фев 2012 в 12:33
а \@media handheld не проканает?
29 фев 2012 в 13:17
Должно проканать)
1 мар 2012 в 10:23
Без javascript не обойтись! — обойтись медиа запросами.
28 авг 2016 в 7:12
@user190134, в 12 году их поддержка была не очень
17 фев 2017 в 6:31

  • html
  • javascript
  • css
    Важное на Мете
Связанные
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Как убрать элемент (картинку) с сайта при ширине экрана меньшей х?

Делаю адаптивный дизайн, необходимо, чтобы определённый элемент не отображался при малом разрешении экрана, желательно при помощи css.

  • Вопрос задан более трёх лет назад
  • 34184 просмотра

Комментировать

Решения вопроса 2

benbor

Помог ответ — не забудь лайкнуть

используйте media query. например

@media (min-width:900px) and (max-width:1300px) < .need-hide< display:none; >>

Ответ написан более трёх лет назад

Нравится 7 1 комментарий

anov

А как удалить его из DOM, чтобы он не тратил трафик?

enchikiben @EnChikiben

используйте макросы

@media (max-width: 500px) < img < display: none; >>

Ответ написан более трёх лет назад

Комментировать

Нравится 5 Комментировать

Ответы на вопрос 1

решается добавлением в css файл

@media (max-width:[разрешение экрана]px) < [селектор блока]>

[разрешение экрана]
если экран меньше или равен этой ширине, то элемент не будет отображаться

[селектор блока]
для будет #qwe
для будет .qwe
для будет img

Ответ написан более трёх лет назад

Нравится 3 1 комментарий

Как скрыть элемент в css при разрешении экрана

Здесь нам нужно заключить этот элемент под заданный класс с последствием прописывание под него @media в CSS. Это может быть блок или логотип с картинкой, что на мобильном аппарате не корректно смотрится, а просто считается лишним.

1. Для начало нужно заданный блок или элемент дизайна заключить в div, где все, что заключим не будет отображаться на небольших экранах.

Как раз здесь располагается блок или дизайн, а также может быть информер $MYINF_5$

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. Где теперь веб мастер самостоятельно может скрыть все, то что считает не нужным видеть с мобильных экранов. В основном это идут элементы дизайна, а также функционал, который востребован на широком мониторе, а на мобильных гаджет просто становиться лишним.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *