Media запрос под моб устройства

187

28 ноября 2018, 05:20

Есть media запрос под оптимизацию картинки на моб.устройства.Картинки находятся на главной странице сайта , являются просто банарами

 @media screen and (max-width:960px){
 .double-pick, .double-pick1 p a {
  top: 0px !important;
  left: 0px !important;
  height: 0;
  padding-top: 30%;
  background-size: cover;
  width: 100%;

}

Почему то не получается оптимизировать , все стоит криво при заходе с моб.устройства.P.S вчера настраивал такие же параметры , все работало , сегодня что то слетело и опять пошло по косой.

Вот HTML разметка

<div class = "double_pick">
</div>
<br>
<div class = "double_pick1">
</div>

Помогите пожалуйста, у меня уже нервов не хватает )))

Answer 1

Давайте разберем ваш пример.

@media screen (max-width:960px)

Для окна с max-width:960px которое вы хотите применить к этим стилям. При этом в большинстве случаев вы говорите о чем-либо меньшем, чем экран рабочего стола.

@media screen and (max-width:960px)

Это говорит о том, что для устройства с screen окном и окном с max-width:960pxп применяется стиль. Это почти идентично вышеизложенному, за исключением того, что вы указываете screen в отличие от других доступных типов носителей, наиболее распространенных других print. Так же не стоит забывать про:

@media only screen and (max-width:960px)

Цитата прямо из W3C, чтобы объяснить это.

Ключевое слово «only» также может использоваться для скрытия таблиц стилей от более старых пользовательских агентов. Пользовательские агенты должны обрабатывать медиа-запросы, начиная с «только», как если бы ключевое слово «только» не было.

Поскольку нет такого типа носителя, как «только», таблицу стилей следует игнорировать старыми браузерами.

Answer 2

Вместо @media screen and () просто поставил @media() и все заработало , а вчера работало с media screen and , господи что за мистика.