Media применяется не на тех значениях, которые указываются, хелп?

Question

[Mafi518]

В общем заверстал я макет, сел за адаптацию, пишу первый запрос допустим

@media screen and (max-width: 1600px) {
    body {
        display: none;
    }
}

По логике при ширине в 1600px весь body должен стать display none, но происходит это не на 1600, а на 1280 px
Больше запросов нет, он один единственный, если добавлять новые, то они также непонятно как высчитываются и срабатывают на разрешении в несколько раз меньше, первый раз с таким сталкиваюсь
Мета тоже стоит – meta(name="viewport" content="width=device-width, initial-scale=1.0")
Самое забавное, та же самая запись media работает в другом макете, а в этом нет

Comments

[Владислав Лысков]

min-device-width и max-device-width нужно использовать

Answer 1

[Danny Arty]

Потому что у вас по логике он срабатывает при ЛЮБОЙ ширине не более 1600px, а 1280px входит в эту категорию. Поэтому вы должны дописать условие с min-width.

Во-вторых media-запросы работают в каскадном порядке, поэтому важен также порядок расположения media-запросов в CSS-файле, если вдруг вы не хотите указывать min-width. Каждый запрос всегда будет перекрывать предыдущий

Comments

[Mafi518]

Такого типа запрос тоже был составлен
media only screen and (min-width: 320px) and (max-width: 768px) {
body {
display: none;
}
}
Но решить проблему он не решил, срабатывает на 614px

[Danny Arty]

Mafi518, а есть ли ещё media запросы следующие после этого?

[Mafi518]

Danny Arty, Нет, но я похоже приблизился к разгадке так скажем. Не может ли gulp как-то неправильно собирать проект, я запустил его непосредственно с папки, а не через browser sync и там медиа работает адекватно как и должно

[Сергей delphinpro]

Mafi518, (min-width: 320px) and (max-width: 768px) — означает
от 320 до 768
614 как раз входит в этот диапазон. В чем проблема?

[Danny Arty]

Сергей delphinpro, я думал он имеет в виду, мол в диапазоне от 320px до 613px не срабатывает, а начинает только на 614px. Но если автор имел в виду, что работает запрос и в 614px, то это просто ха-ха

[Сергей delphinpro]

Danny Arty, Если так, что автору стоит открыть devTools в хроме и посмотреть какие запросы есть, какие применяются и в каком месте кода.

[Mafi518]

Возможно я неправильно выражаюсь конечно. Суть в том, что стили должны работать от 768 и до 320 верно? Но сжимая страницу стили применяются только когда ширина достигает 614px, то есть с 768 по 614 ничего не работает, хотя должно

[Mafi518]

То есть весь этот промежуток от 768 до 614 – ничего не происходит

[Danny Arty]

Mafi518, ну я так и подумал. А можно взглянуть на часть кода css-файла вашего, где прописаны media запросы?

Answer 2

[Steppp]

Так max-width: 1600px - это максимальная ширина! А то что на 1280, так там планшет!
пиши min-width: 1600px - это от 1600 и больше

По идеи так должно быть,

.css {
  код десктоп 
  // тоесть выполняется всегда
}
@media (max-width: 1023px) {
  .css {
    код планшет 
      // выполняется если разрешение меньше 1023рх
  }
}
@media (max-width: 767px) {
  .css {
    код мобила
    // выполняется если разрешение меньше 767px
  }
}

БЕЗ screen and

Answer 3

[Евгений Кузовлев]

Проверьте нет ли масштабирования страницы в браузере или глобально в системе

Comments

[Mafi518]