Не работает @media screen

@kurlyak · Регистрация: 26.09.2007

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

Пишу код в visual studio code. Тестирую сайт на google chrome.

Такой код не работает - при меньше 870 страница не исчезает

CSS
1
2
3
4
5
@media screen and (max-width: 870px){
    body {
        display: none;
    }     
 }

Если без @media то такой код работает - страница исчезает

CSS
1
2
3
    body {
        display: none;
    }

почему не работает @media screen and (max-width: 870px) ?

@gogolik · 30.05.2024, 12:40

Вьюпорт задан?

HTML5
1
<meta name="viewport" content="width=device-width,initial-scale=1">

@ivanov_333 · 30.05.2024, 12:46

kurlyak,

в принципе @media записываются в конце CSS файла.

Возможные причины неработоспособности следующие:

1. Если вы открываете страницу на устройстве шириной более 870 пикселей
2. Какая-то техническая (грамматическая) ошибка в написании правиле @media
3. Если в коде есть другое правило, установленное ниже, которое конфликтует с ним

п.с. Если вы просто открываете страницу на экране компьютера, это не сработает, поскольку ее ширина, наверно, превышает 870 пикселей!

@targon_kp · 31.05.2024, 02:30

Скорее всего в коде ниже есть правило, которое перебивает то, при котором body должен пропадать.

@Spoojy · 01.06.2024, 13:43

Попробуйте в CSS написать вначале следущее -

CSS
1
2
3
@media screen and (max-width: 1280px) { div.contentblock {width: 1200px;}}
@media screen and (max-width: 1140px) { div.contentblock {width: 1024px;}}
@media screen and (max-width: 992px) { div.contentblock {width: 970px;}}

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@ivanov_333 202 / 126 / 25 Регистрация: 09.01.2022 Сообщений: 458
	30.05.2024, 12:46
	kurlyak, в принципе @media записываются в конце CSS файла. Возможные причины неработоспособности следующие: 1. Если вы открываете страницу на устройстве шириной более 870 пикселей 2. Какая-то техническая (грамматическая) ошибка в написании правиле @media 3. Если в коде есть другое правило, установленное ниже, которое конфликтует с ним п.с. Если вы просто открываете страницу на экране компьютера, это не сработает, поскольку ее ширина, наверно, превышает 870 пикселей! 0

@targon_kp 7 / 7 / 1 Регистрация: 03.09.2021 Сообщений: 271
	31.05.2024, 02:30
	Скорее всего в коде ниже есть правило, которое перебивает то, при котором body должен пропадать. 0