Адаптивная верстка, что я делаю не так?

Question

[indee2]

Привет всем. Что я опять не так сделал?

Верстаю простенькие сайты. Решил освоить сss фреймворк и адаптивную верстку.

Макет сверстал. Мета тег подключил. При уменьшении границ браузера фреймворк уже сам подстраивает сетку в колонки одна за одной, как и надо. Вроде все хорошо и осталось только кое какие стили подправить чтоб все смотрелось идеально.. и тут косяк.

В CSS сразу уже прописаны media-переменные:

@media (min-width: 400px) {}
@media (min-width: 550px) {}
@media (min-width: 750px) {}

Например я вношу изменения в первую media, т.е должны изменится стили (для айфона например) но те изменение которые я внес в media-переменную для телефона, подцепляет и сам сайт. т.е переопределяет основные. Почему так?

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

Answer 1

[Юлия Старченко]

@media (min-width: 400px) {} - это не media-переменная для телефона, это media-запрос, срабатывающий когда ширина больше 400px, т.е. это также и планшеты, и десктопы. Такое поведение абсолютно логично и правильно, это mobile first. Когда вы будете прописывать остальные media для устройств побольше - они будут добавлять и перезаписывать основные стили и стили из предыдущих media-запросов.

Если же нужно добавить стили жестко для мобильных, добавьте еще max-width, как советовали выше: @media (min-width: ...) and (max-width: ...) {}

Answer 2

[#rybak]

Вот так пиши и всё будет ок.

{сначала обычные стили для полноэкранной версии сайта}
@media (max-width: 1200px) {тут стили для средних экранов}
@media (max-width: 1000px) {тут стили для маленьких экраноыв}
@media (max-width: 750px) {тут стили для мобильных телефонов}

т.е. используй max-width и иди от больших экранов к маленьким.

Answer 3

[Талгат Балтасов]

укажите еще max-width мало ли

Answer 4

[Ivan Tokar]

Попробуйте разобраться в концепции mobile first, У вас написано в media queries min-width, а это надо понимать как: этот размер и выше.

Answer 5

[Stalker_darkway]

!important пропиши для css и добавь max-width

Answer 6

[Юнус Газиев]

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Медиа-запросы