Медиа-запросы CSS не работают. Что я делаю не так? [требует правки]

1329

07 февраля 2017, 21:20

Столкнулась с проблемой: один из стилей CSS, используемый мною в дизайне сайта, сильно тормозит работу сайта с мобильника (тестирую на айфоне). Поэтому решила его не использовать для мобильных. Прописываю медиазапрос @media screen and (max-width: 990px), но он не работает, когда я просматриваю страницу с телефона и по-прежнему тормозит работу сайта (часто даже телефон полностью зависает).

Помогите пожалуйста решить проблему! Ниже код; первый сам стиль:

.blur-gallery {
  list-style:none;
  margin: 50px auto; padding: 0;
  width: 80%;
  font-size: 0;
}
.blur-gallery li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  width: 30%; min-width: 250px; height: auto;
  margin: 2px;
  transition: all .3s ease;
}
.blur-gallery:hover {
  -webkit-filter: blur(2px) grayscale(1);
  opacity: .7;
}

на втором медиазапрос:

@media screen and (max-width: 990px) {
 .blur-gallery {
  list-style:none;
  margin: 50px auto; padding: 0;
  width: 80%;
  font-size: 0;
 }
 .blur-gallery li {
  display: inline-block;
  width: 30%; min-width: 250px; height: auto;
  margin: 2px;
 }
 .blur-gallery:hover {
  display: inline-block;
  width: 30%; min-width: 250px; height: auto;
  margin: 2px;
 }
}

Answer 1

Ваш медиа-запрос на мобильном разрешении (320 пикселей по ширине для айфона) будет дублировать основной код, ничего к нему не добавляя.

Если вы хотите разнести имеющийся код так, чтобы совсем не надо было ничего перекрывать, то пропишите медиа-запросы таким образом:

@media (max-width: 320px) {
  // ваш код для экранов 320 пикселей и меньше
}
@media (min-width: 321px) {
  // ваш код для экранов 321 пиксель и больше
}

Answer 2

Дело в том, что на iPhone физическое разрешение одно, а в браузерах - другое. Советую вам прочитать данную статью: https://m.seonews.ru/analytics/o-chem-nuzhno-pomnit-pri-sozdanii-adaptivnoy-verstki/