em cascata especificidade do CSS com consultas de mídia de largura min-lar Isso requer o uso de consultas de mídia de largura de minúcia para direcionar dispositivos de tamanhos de tela específicos. No entanto, pode ser confuso ao substituir os valores do CSS para resoluções de tela mais altas, pois a largura minúscula parece ter precedência. No exemplo fornecido:

@mídia somente tela e (min-width: 600px) { h2 {font-size: 2.2em; } } @media apenas tela e (largura min: 320px) { H2 {Fonte: Normal 1.7em/2.1em Helvetica, sem serrif; } }

ambas as consultas de mídia são verdadeiras quando a largura da tela é 600px ou maior. No entanto, a segunda regra ocorre mais tarde na cascata, por isso é preciso precedência e o tamanho menor da fonte 1.7EM é aplicado. Consultas:

@Media Screen e (Min-Width: 320px) { H2 {Fonte: Normal 1.7em/2.1em Helvetica, sem serrif; } } @media apenas tela e (largura min: 600px) { h2 {font-size: 2.2em; } }

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

Isso garante que o tamanho maior da fonte seja aplicado quando a largura da tela é de pelo menos 600px. Isso lhe dará a especificidade em cascata que você espera, com a maior largura de largura tendo precedência.