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

Question

[Дмитрий Калинин]

Я не спец. по верстке, но Интересует вопрос почему медиазапросы, возьмем на примере бутстрапа 3го, не отрабатывают на граничных брейкпоинтах.
например блок с классами
.hidden-sm .hidden-md
где соответственно:

@media (max-width: 991px) and (min-width: 768px){
.hidden-sm {
    display: none!important;
}
}
@media (max-width: 1199px) and (min-width: 992px){
.hidden-md {
    display: none!important;
}
}

не будет скрыт при ширине экрана 991 px (т.е. на границе перехода стили не отработают). почему так происходит и как это решается?

Answer 1

[Дмитрий Калинин]

проблема оказалась в том что на мониторах с высоким разрешением стоит масштабирование в настройках системы (напр. 150% для приложений и прочего) и это дает неправильное отображение в таких ситуациях в браузерах. при установке 100% все ок. так что может будет полезно кому.

Comments

[Golden_Puma]

огромное спасибо за подсказку, я думала я больная
и как быть???

Answer 2

[Steppp]

Скобки забыл!

@media (max-width: 1199px) and (min-width: 992px) {
  .hidden-md {
      display: none!important;
  }
}

Comments

[Дмитрий Калинин]

Да скопировал с браузера просто, поправил, это сути не меняет

[Steppp]

Дмитрий Калинин,
Попробуй поменять местами!

@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
      display: none!important;
  }
}

[Дмитрий Калинин]

Steppp, это бутстраповские стили

[Steppp]

Дмитрий Калинин, Да я уже посмотрел, перестановка не поможет) Даже не знаю в чем проблемка!
Если возможно взглянуть на сайт, было бы хорошо)

[Дмитрий Калинин]

прикол, на ноуте все ок. а на стационарном где у меня 4К монитор не ок. и именно на граничной точке. во всех браузерах. возможно в мониторе дело (масштабировании контента, драйверах, хз..)

[Steppp]

Дмитрий Калинин,
Проверяй ширину в таком виде)
Попробуй почистить кеш! Или вообще отключить!

[Дмитрий Калинин]

Steppp, только в таком и поверяю. Кеш не работает когда панель разработчика открыта