Специфика CSS, медиа-запросы и минимальная ширина

Я перепроектирую свой блог с учетом адаптивного веб-дизайна и метода "мобильный первый". Короче, я пытаюсь использовать минимальную ширину, чтобы избежать какой-либо репликации или css. no display: none и т.д...

Моя проблема в том, что когда мне нужно переписать значение CSS, нижняя минимальная ширина имеет приоритет. Пример:

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

Я бы ожидал, когда я нахожусь в разрешениях 600 пикселей и выше, чтобы получить 2.2em h2, но вместо этого я получаю 1.7em. В моих инструментах Dev я вижу, что декларация 2.2em есть, но другая имеет преимущество. Это не имеет смысла!

Могу ли я использовать min-width и эффективно перезаписывать объявления с более высоким разрешением без использования более сильных селекторов или max-width.?

Ответ 1

Я бы ожидал, когда я нахожусь в разрешениях 600 пикселей и выше, чтобы получить 2.2em h2, но вместо этого я получаю 1.7em. В моих инструментах Dev я вижу, что декларация 2.2em есть, но другая имеет преимущество. Это не имеет смысла!

Это имеет смысл. Если среда соответствует min-width: 600px, то она также должна выполнять min-width: 320px; другими словами, все, что имеет ширину не менее 600 пикселей, также имеет ширину не менее 320 пикселей, так как 600 больше 320.

Поскольку оба медиа-запроса оцениваются как true, последнее правило имеет приоритет в каскаде, что делает ваш код эквивалентным этому:

h2 { font-size: 2.2em; }
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }

Это объясняет, почему 2.2em появляется в ваших инструментах разработчика, но не имеет очевидного эффекта.

Самое простое исправление заключается в том, чтобы переключать блоки @media, чтобы ваши правила каскадировались в правильном порядке:

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}