Почему медиазапросы CSS не следуют обычным соглашениям наследования и каскада?

Question

У меня были некоторые проблемы с моими медиа-запросами CSS3...

Вот небольшой фрагмент, над которым я сейчас работаю:

@media only screen 
and (max-width : 420px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}

/* Increase the main title for slightly larger screens! */
@media only screen 
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

Я работаю с точки зрения "мобильного первого" и, учитывая нормальное поведение CSS в отношении "каскадного" аспекта, я ожидаю второго @media оператор для наследования всех стилей из предыдущего оператора, в то же время переопределяя любой стиль, для которого он имеет соответствующий или более "тяжелый" селектор.

(Плюс порядок приоритета CSS будет означать, что любые соответствующие определения стиля будут использовать последний определенный набор правил, если только не "превзойдены" с !important заявление!)

Из того, что я видел, через тестирование и некоторые поиски в Google / SE это не так.

Это возможно для @media правила стиля, чтобы унаследовать от применимых более ранних утверждений, или я застрял с необходимостью повторять все правила, которые мне нужны для каждого утверждения? (не очень сухой)

Буду очень признателен за любую помощь и разъяснения / объяснения для этого.

Answer 1

Во-первых, спасибо @BoltClock (за оба комментария), а также за другие комментарии и ответы за всю вашу помощь.

Я думаю, что допустил ошибку в своих медиа-запросах и / или неправильно понял, как они работают и взаимодействуют друг с другом. Я собирался отредактировать свой вопрос следующим образом, но решил, что в качестве ответа он будет иметь больше смысла (так как это решение я использовал). Я прошу прощения, если это потратило впустую чужое время.

Вот мой исправленный фрагмент кода:

@media only screen 
and (max-width : 480px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}
/* Increase the main title for slightly larger screens! */
@media only screen 
and (min-width : 421px)
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

Из ваших комментариев я понял, что если бы я увеличил максимальную ширину в своем первом блоке, чтобы покрыть необходимый диапазон / лимит, я мог бы затем вложить или добавить второй блок после него (я пробовал оба, и они оба работали для меня - используя хром браузер [18.0.1025.151]). Это успешно дало мне желаемый результат в том, что page .alpha размер шрифта элемента увеличен с требуемым шагом / интервалом.

Еще раз спасибо всем, кто помог! (и для SE за потрясающие сообщества, которые они помогли построить)

Знание> OpenSource > Свобода

Answer 2

Если вы хотите работать с мобильного устройства, вам нужно установить макет мобильного телефона в качестве макета по умолчанию. (Удалить запрос). Оттуда запросы будут наследоваться сверху.

.page { min-width: 300px; max-width: 480px; width: 100%; }
.page .alpha { font-size: 2em; }

 /* Set-up the column */
.page .column { margin: 0 auto 2%; width: auto; }
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; }

/* Increase the main title for slightly larger screens! */
@media only screen 
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}