Вопрос Адаптивная верстка css

[бислан]

Почему когда я пишу @media (max-width: 1024px) и назначаю новые стили, то у меня они у меня смешиваются со старыми?

 

[daresq]

Правило @media должно быть в самом конце.

 

[4eByRNaT0R]

Почитай про приоритетность селектора.

 

[dest]

Вероятно, это происходит потому, что у вас уже есть определенные стили для элементов страницы, которые применяются без использования медиа-запросов. Когда размер экрана уменьшается до указанного значения в медиа-запросе, стили, которые вы указали для этого медиа-запроса, применяются к элементам, но при этом стили, которые уже были применены к элементам без медиа-запроса, также остаются.

Чтобы решить эту проблему, вам нужно явно указать стили, которые должны переопределяться внутри медиа-запроса, добавив их после медиа-запроса. Например, если вы хотите изменить размер шрифта для элемента при ширине экрана менее 1024px, то нужно написать так: @media (max-width: 1024px) {
.my-element {
font-size: 14px;
}
}
Это переопределит размер шрифта только для элемента .my-element при условии, что ширина экрана меньше 1024 пикселей. Все остальные стили для .my-element, которые были заданы ранее, останутся без изменений.

 

[Rusia2999]

Потому что так и должно быть. Нужно переписывать или все стили в медиазапросе, или только те, которые нужны, но при этом размещать блок кода в самом конце (а еще лучше в отдельном файле стилей, который будет загружен позже основного). Или вообще использовать медиазапросы только для изменения CSS-переменных.