@booogabooo

Почему не работают медиа запросы?

У меня не получается применить такие конфигурации...
Суть в том, что при определенно ширине и высоте меню должно меняться...вот сами запросы
@media(min-width: 640px) and (max-width: 734px), screen and (max-height: 624px){
    .res_per_hour{
        width: 90%;
        background-color: #011E3A;
        border-radius: 10px;
        position: relative;
        float: right;
        left: 52%;
        top: -290px;
        font-family: 'DINPro Bold';
        color: white;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    .purshares, .repository{
        top:-410px;
        width: 45%;
    }
}
@media(min-width: 640px) and (max-width: 734px), screen and (min-height: 625px){
    .res_per_hour{
        width: 82%;
        background-color: #011E3A;
        border-radius: 10px;
        position: relative;
        float: right;
        left: 52%;
        top: -410px;
        font-family: 'DINPro Bold';
        color: white;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    .purshares, .repository{
        top:-410px;
        width: 45%;
    }
}


в итоге в любом случае применяются стили для высоты от 625px
  • Вопрос задан
  • 40959 просмотров
Пригласить эксперта
Ответы на вопрос 4
Prakop
@Prakop
Вот что мне помогло, вставить в шапку сайта такой метатег
<meta name="viewport" content="width=device-width, initial-scale=1">
Ответ написан
illinifellow
@illinifellow
front-end developer
как правило такое сложности возникают, когда не учитывается специфичность такого обращения к селекторам. попробуй закинуть эти свйоства в конец сss файла.

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

    @media all and (min-width: 640px) and (max-width: 734px){
        * {
           background: red;
        }
    }

Ответ написан
seregazolotaryow64
@seregazolotaryow64
IT Специалист и самоучка
Пробовал применять resolution и device-width и к ним прикрепил масштабирование всего тела. Применял @media screen и @media all и подключил тег viewport. Тестирую на нетбуке и ничего не работает.
Ответ написан
Комментировать
@Etiene
Бывает, когда пишешь код css через препроцессор Sass, когда какой-то элемент был не принят препроцессором, по причине ошибки в написании, последующие изменения в код не вносятся, до исправления предыдущей ошибки. Поэтому, когда пишешь media - команда не срабатывает, так как была совершена ошибка в коде до этого (система кривая, но так уж она работает). Советую воспользоваться препроцессором Prepros, он после каждого изменения указывает подтверждения правильности кода, либо указывает на ошибку.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы