Медиа-запросы CSS не работают для определенного диапазона, как ожидалось в Chrome и Mozilla, и не тестировались в других браузерах

Question

Приведенные ниже примеры запросов не работают должным образом, и я протестировал их в браузерах chrome (v74.0.3729.169 (официальная сборка) (64-разрядная версия)) и Mozilla (v66.0.2 (64-разрядная версия)).

@media screen and (max-width: 1199px) and (min-width: 992px) {
  div.example {
    border: 8px solid black;
    background: yellow;
  }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
  div.example {
    border: 8px solid black;
    background: red;
  }
}

@media screen and (max-width: 767px) and (min-width: 480px) {
  div.example {
    border: 8px solid black;
    background: green;
  }
}

Для пояснения я возьму ниже одного

@media screen and (max-width: 767px) and (min-width: 480px) {
  div.example {
    border: 8px solid black;
    background: green;
  }
}

Пожалуйста, посмотрите скриншоты ниже для вышеупомянутого медиа-запроса:

, который не работает для 767px

Который работает для 766px

В приведенном выше медиа-запросе не стилизуется мой селектор div.example с размером экрана 767px, а стилем ниже 767pxРазмер экрана.

Как правило, приведенный выше фрагмент css должен работать с размером экрана 767px и less then 767px до 480px & above 480px.

Но вышеупомянутый фрагмент css работает с less then 767px до 480px & above 480px размером экрана.

Аналогично, нижеприведенные запросы также не работают должным образом

@media screen and (max-width: 1199px) and (min-width: 992px) {
  div.example {
    border: 8px solid black;
    background: yellow;
  }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
  div.example {
    border: 8px solid black;
    background: red;
  }
}

И, наконец, я просто вручную смотрю, какой диапазон размеров экрана не работает должным образом, а затем нашел для этих диапазонов 981 to 991, 1181 to 1199, 761 to 767.

Ниже css медиа-запросы работают должным образом, но с разными точками останова.

@media screen and (max-width: 1200px) and (min-width: 993px) {
  div.example {
    border: 8px solid black;
    background: yellow;
  }
}

@media screen and (max-width: 992px) and (min-width: 769px) {
  div.example {
    border: 8px solid black;
    background: red;
  }
}

@media screen and (max-width: 768px) and (min-width: 480px) {
  div.example {
    border: 8px solid black;
    background: green;
  }
}

Работает для конкретной ссылки на медиа-точки останова - https://codepen.io/rag7s/pen/PvrREx

Не работает для конкретной медиа-точки останова ссылка- https://codepen.io/rag7s/pen/pmXLpv

Answer 1

Проверьте сейчас

@media (max-width: 1199px) {
    div.example {
        border: 8px solid black;
        background: yellow;
    }
}

@media (max-width: 991px) {
    div.example {
        border: 8px solid black;
        background: red;
    }
}

@media (max-width: 767px) {
    div.example {
        border: 8px solid black;
        background: green;
    }
}

https://codepen.io/anon/pen/zQVaxy

Answer 2

Как правило, пиксель должен быть наименьшей единицей для работы на экранах. Но при использовании дисплеев с высоким разрешением, таких как сетчатка, вы можете использовать дробные пиксели.

@media screen and (max-width: 1199.5px) and (min-width: 992px) {
    .example {
        background: yellow;
        border: 8px solid black;
    }
}

@media screen and (max-width: 991.5px) and (min-width: 768px) {
    .example {
        background: red;
        border: 8px solid black;
    }
}

Вам также следует рассмотреть возможность использования ems в качестве значений единиц. Исходя из настроек размера шрифта в браузере по умолчанию 1em равно 16px.

@media screen and (max-width: 74.9688em) and (min-width: 62em) {
    .example {
        background: yellow;
        border: 0.5em solid black;
    }
}

@media screen and (max-width: 61.9688em) and (min-width: 48em) {
    .example {
        background: red;
        border: 0.5em solid black;
    }
}