CSS: медиа-запросы задерживаются

Question

У меня есть ошибка на моем сайте, и я подозреваю, что проблема с медиа-запросами.Некоторые стили применяются следующим образом:

.main {
      border:1px solid black;
}

@media screen and (max-width: 350px) {
   .main {
      border:1px solid red;
   }
}

(Конечно, это всего лишь примеры, мои стили более сложны.)

Когда я открываю непосредственно мою веб-страницу шириной менее 350 пикселей,Я могу увидеть исходное правило CSS (border:1px solid black;) в течение 1 с до применения медиазапроса (border:1px solid red;).Это более заметно на старом устройстве (производительность процессора?).

Но когда я изменяю ширину браузера ниже 350px, медиа-запрос применяется плавно.

Вопрос: как я могу это исправить

Answer 1

Пробовали ли вы с медиа-запросом минимальную и максимальную ширину вместе?

Пожалуйста, проверьте ниже,

@media screen and (max-width: 350px) and (min-width: 0px) 
{
  Your Styles
}

Answer 2

.main {
      border:1px solid red;
}

@media screen and (min-width: 350px) {
   .main {
      border:1px solid black;
   }
}