Найти в Дзене
2 подписчика

Загадка, которая сломала меня примерно на полдня.


Есть некий блок со стилями, в котором в зависимости от ширины экрана меняются параметры:
@media (max-width: 679px) {
  // тут стили
}
@media (min-width: 680px) and (max-width: 1204px) {
  // тут тоже стили
}

Вроде бы, ничего такого, чего бы не делал много раз. И буквально вчера обнаружил аномальное поведение:

- на 678px ширины экрана стили нормально отображаются
- на 679px всё пропадает (как будто медиа-запроса и не было)
- на 680px — все по плану, ничего не было, расходимся

И вот честно, такое поведение видел впервые. А поскольку если я знаю, что знаю мало, я добьюсь того, чтобы знать больше, пошёл рыть интернет и спрашивать по знакомым.

Ничего.

Пробовал всё - от перестановки слагаемых до изменения запросов и игрой с мета-тегом viewport.

Рецепт оказался проще, за наводку спасибо gleckler:

@media (max-width: 679.99999999999999px)

Работает. Если у кого будут подобные проблемы, то вы знаете, что делать 😎
Загадка, которая сломала меня примерно на полдня.
Около минуты