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

Question

[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

Answer 1

[Антон]

Вот что мне помогло, вставить в шапку сайта такой метатег

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

Comments

[nikoam]

Антон Спасибо, чувак ! ... Я уже было начал грешить на CMS )))

[artemartemenkoartem]

Была похожая ситуация, полдня протупил. Добавил этот метатег и вуаля) Спасибо;)

[shoelaces_i]

Спасибо! )

[r4v3nzzz]

ОМГ... Спасибо большое!

Answer 2

[vanya novikov]

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

не вдаваясь в подробности конкретной проблемы, есть несколько шагов к выявлению ошибки:

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

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

  
  

Comments

[booogabooo]

медиа работают на половину...ширина учитывается, а высота нет

[Владик Лимонадик]

booogabooo: что дев тулзы говорят? скрин мб какой?

Answer 3

[Сергей Золотарёв]

Пробовал применять resolution и device-width и к ним прикрепил масштабирование всего тела. Применял @media screen и @media all и подключил тег viewport. Тестирую на нетбуке и ничего не работает.

Answer 4

[Etiene]

Бывает, когда пишешь код css через препроцессор Sass, когда какой-то элемент был не принят препроцессором, по причине ошибки в написании, последующие изменения в код не вносятся, до исправления предыдущей ошибки. Поэтому, когда пишешь media - команда не срабатывает, так как была совершена ошибка в коде до этого (система кривая, но так уж она работает). Советую воспользоваться препроцессором Prepros, он после каждого изменения указывает подтверждения правильности кода, либо указывает на ошибку.