Возможно, вы захотите уточнить хотя бы один или два примера конкретных проблем, с которыми вы сталкиваетесь, но просто глядя на один или два элемента, запомните некоторые основные правила CSS.
- При использовании мультимедийных запросов будут инициированы любые правила, соответствующие условиям.
- Правила переписывают друг друга сверху вниз, что означает, что все, что указано последним, будет использоваться.
- Если вы столкнулись с проблемами, когда ваши правила выглядят по-другому, помните, что, если правила CSS переписывают друг друга, это зависит от специфики правила. (Это больше примечание стороны, но важно помнить, Видят эту статью calculating CSS specificity если это проблема, вы сталкиваясь..)
Например:
@media (min-width: 768px) {
#content {
width: 656px;
}
}
@media (min-width: 480px) {
#content {
width: 100%;
}
}
После просмотра (размер окна браузера) составляет 480px, ваш элемент с id = «content» будет 100% шириной. Затем, когда ваш viewport равен 768px, он будет по-прежнему иметь 100% ширину, потому что второе правило перезаписывает первый, поскольку оба правила верны.
Если вы хотите, чтобы правила перекрывали правило запросов меньшего размера, вы должны убедиться, что ваш запрос на размер большого размера приходит после. Например:
@media (min-width: 480px) {
#content {
width: 100%;
}
}
@media (min-width: 768px) {
#content {
width: 656px;
}
}
Надеюсь, что имеет смысл.
Значит, вы не можете использовать px для одной ширины и% для другого и ожидать, что сойдет с рук? –
@ AdamBell, я пропустил шаг в своем объяснении. Обновлен мой ответ –