Конфликты мобильных точек останова

Question

Есть ряд точек останова, с которыми я работаю, но последняя мобильная точка останова, кажется, переопределена предыдущей точкой останова (max-width: 980px).Я попытался откорректировать точку останова 980px, добавив минимальную ширину: 482, чтобы лучше ориентироваться на эти запросы, но это не дало эффекта.Это серия существующих точек останова, с которыми я имею дело:

@media only screen and (max-width:760px), (min-device-width:768px) and (max-device-width:1024px) {
}
@media (min-width:768px) and (max-width:991px) {
}
@media only screen and (max-width:1024px) {
}
@media only screen and (max-width:980px) {
}
@media only screen and (max-width:481px) {
}

Мне нужно, чтобы точка прерывания max-width: 481px была подтверждена браузером, чтобы мобильный стиль вступил в силу.Я знаю, что где-то есть конфликт, но я не могу его точно определить.

Answer 1

Я предполагаю, что вы знаете, как CSS интерпретирует все объявленные стили

Сначала Давайте нумеруем все медиазапросы в порядке, с которого стиль будет применяться первым до последнего

// #5
@media only screen and (max-width:760px), (min-device-width:768px) and (max-device-width:1024px) {
}
// #4
@media (min-width:768px) and (max-width:991px) {
}
// #3
@media only screen and (max-width:1024px) {
}
// #2
@media only screen and (max-width:980px) {
}
// #1
@media only screen and (max-width:481px) {
}

Теперь давайте рассмотрим диапазоны эффекта, не забывайте, что порядок #1 будет применен первым, если носитель совпадает, если нет, то #2 и т. Д.

1. Стили с #1 будут применяться с 0px to 481px
2. Стили с #2 будут применяться с 0px to 980px
3. Стили с #3 будут применяться с 0px to 1024px
4. Стили с #4 будут применяться с 768px to 991px
5. Стили с #5 будут применяться с 0px to 760px and from 768px to 1024px

Если вы еще не видите никакого конфликта, это следует объяснить. не забывайте заказ.

Answer 2

Некоторые из этих размеров не работают, потому что перезаписаны порядком CSS.

@media only screen and (max-width:760px), (min-device-width:768px) and (max-device-width:1024px) {}
@media (min-width:768px) and (max-width:991px) {}

Эти две точки прерывания носителя перезаписываются на @media only screen and (max-width:1024px)

Я вижу, вы хотите использовать 5 контрольных точек, но чтобы избежать их перезаписи, вы можете использовать 4:

1. max-width: 481px
2. max-width: 767px
3. min-width: 768px and max-width: 991px
4. min-width: 992px and max-width: 1024px

В заключение, если размеры по ширине совпадают, работает только последний порядок в CSS.