Диапазоны медиа-запросов CSS

[Pavel-E-F]

 Вы наступили на мою больную мозоль (фигурально).

.nav {
  @media (max-width: 299px) {
    display: none;
  }
}

.toggle {
  @media (min-width: 300px) {
    display: none;
  }
}

Очень плохой пример. Даже показывать его нельзя.
Ибо если ширина будет 299.5px, то что будет?
Может лучше использовать оператор not?

.nav {
  @media not (min-width: 300px) {
    display: none;
  }
}

.toggle {
  @media (min-width: 300px) {
    display: none;
  }
}

/* Меньше или равно 300px */
.nav {
  @media (width <= 300px) {
    display: none;
  }
}

/* Больше 300px */
.toggle {
  @media not (width <= 300px) {
    display: none;
  }
}

И никаких проблем.
Есть у меня подозрение, что даже сейчас, даже современные браузеры с округлением значений в медиа запросах будут лажать. А одинаковые запросы с not на одном из них точно дадут ожидаемый результат.