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

Question

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

Моя проблема заключается в том, что когда мне нужно переписать значение 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; } 
} 

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

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

Answer 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; } 
}