Почему некорректно срабатывает условие media?

Question

[AlexandrMa]

body{
  background-color: #000;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body {
    background-color: #00CC66;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  body {
    background-color: #8e149b;
  }
}

Один из наших сайтов имеет вот такую ширину и условия.
У меня вопрос, почему при выборе ширины 1023 медиа не срабатывают? Черный экран.
Ведь теоретически, черный цвет не должен вообще появляется.

Answer 1

[Rsa97]

Встречный вопрос - какой стиль должен примениться при ширине 1023.01px?
Замените 1023px на 1023.99px или используйте новый синтаксис

- @media (min-width: 769px) and (max-width: 1023px) {
+ @media (769px <= width < 1024px) {

https://css-tricks.com/the-new-css-media-query-ran...
https://caniuse.com/css-media-range-syntax

Comments

[AlexandrMa]

Спасибо, не подумал, что может быть размер .99)))