Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.56/9: Рейтинг темы: голосов - 9, средняя оценка - 4.56
0 / 0 / 0
Регистрация: 25.05.2018
Сообщений: 38

Не срабатывает медиа запрос в firefox

20.01.2020, 11:52. Показов 2042. Ответов 5

Студворк — интернет-сервис помощи студентам
Написал несколько медиа запросов для странички - в Хроме и Опере все работает, в Firefox тоже, кроме запросы на max-width: 375px - под iPhoneX. Не понимаю в чем проблема и почему конкретно в мозилле такая ситуация.

CSS
1
2
3
4
5
6
7
8
9
10
11
@media screen and (max-width: 375px) {
 
    .topnav .to_inv {
        display: none;
    }
       .topnav .mobile {
        display: block;
        text-align: center;
        margin: 1% 2%;
    }
}
Это лишь часть условия один блок должен скрыться, а другой, наоборот, отобразиться - но этого не происходит, и в принципе все остальные условия также не работают, хотя для разрешений 1600px, 1440px, 1024px все работает в мозилле нормально. В чем может быть проблема?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
20.01.2020, 11:52
Ответы с готовыми решениями:

Не срабатывает свойство в медиа запросе
Есть медиа запрос @media only screen and (max-width : 992px) .button font-size: 18px .buttoncase grid-column: 1 / 4 ...

Не понимаю почему не срабатывает, функция медиа в CSS
@media screen and (max-height: 200px){ .Ob{ height: 8.5%; top: 65%; width: 70%; left: 15%; ...

При масштабировании в Firefox почему-то меняются размеры экрана в css медиа запросе
Использую такой медиа-запрос для вывода картинки: <picture> <source srcset="/jpg/mos01s1.jpg" media="(min-device-width:...

5
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3951 / 2059 / 829
Регистрация: 13.03.2010
Сообщений: 6,774
20.01.2020, 12:04
Можно ссылку на страницу с проблемой? Не могу повторить у себя.
0
0 / 0 / 0
Регистрация: 25.05.2018
Сообщений: 38
20.01.2020, 12:29  [ТС]
Сделал маленький пример с наглядной демонстрацией (как минимум у меня в браузере)
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .a {
            display: none;
        }
 
        @media screen and (max-width: 375px) {
            .test {
                display: none;
            }
 
            .a {
                display: block;
            }
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="test">Abbrakadabbra!</div>
    <div class="a">Alliluya!</div>
</body>
</html>
Добавлено через 1 минуту
При переходе в адаптивный режим с разрещением 375px на Firefox медиа запрос не срабатывает
0
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3951 / 2059 / 829
Регистрация: 13.03.2010
Сообщений: 6,774
20.01.2020, 12:32
Batradz777, всё прекрасно работает...
Миниатюры
Не срабатывает медиа запрос в firefox   Не срабатывает медиа запрос в firefox  
0
0 / 0 / 0
Регистрация: 25.05.2018
Сообщений: 38
20.01.2020, 12:36  [ТС]
Не пойму тогда в чем дело, в хроме все ок, но именно в мозилле косячит, и что интересно, если запрос сделать хотя бы для разрешения 900px, то тогда реагирует
Миниатюры
Не срабатывает медиа запрос в firefox  
0
0 / 0 / 0
Регистрация: 25.05.2018
Сообщений: 38
20.01.2020, 12:41  [ТС]
У меня вот так
Миниатюры
Не срабатывает медиа запрос в firefox  
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
20.01.2020, 12:41
Помогаю со студенческими работами здесь

Запрос срабатывает в SQL Server, но не корректно срабатывает в Visual Studio 2017
(SELECT ROW_NUMBER() over (ORDER BY AVG(Отметки.Отметка) DESC) ID, .ФИО, .Группа, Отметки., Отметки.Полугодие, AVG(Отметки.Отметка) AS...

Свойство margin не срабатывает в FireFox
Что может быть, если свойство margin-right не срабатывает в Файр Фоксе? В Опере и Гугл Хроме все работает. Margin-right задано не...

Медиа запрос
не отправляется запрос max-width:700-900, а вот запрос 1к отправляется нормально, на сатйе https://jsfiddle.net/w33aa8oq/4/ запрос и при...

Не срабатывает скрипт тянущегося контента в Firefox
Доброго дня вам форумчане, пытаюсь разобраться со скриптом который на моём сайте растягивает виджеты по всей высоте экрана. Сам...

Псевдоклас active не срабатывает в Mozilla Firefox
Всем доброго времени суток, Есть сайт на WordPress. Хотел сделать так, чтоб при нажатии на ссылку цвет фона ссылки менялся на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru