Specyfika CSS, zapytania o media i min-szerokość

Question

Przeprojektowuję mój blog z myślą o responsywnym projektowaniu stron internetowych i metodzie "mobilnej pierwszej". W skrócie próbuję użyć minimalnej szerokości, aby uniknąć wszelkiego rodzaju replikacji lub css ... no display: none's etc ..

Mój problem polega na tym, że gdy muszę nadpisać wartość CSS, pierwszeństwo ma mniejsza min-szerokość. Przykład:

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

będę oczekiwać, kiedy jestem w uchwałach 600px i powyżej, aby uzyskać h2 2.2em, ale zamiast dostać 1.7em .. W moich narzędzi Dev widzę, że deklaracja jest 2.2em tam, ale drugi ma pierwszeństwo ... To nie ma sensu!

Czy mogę nadal używać szerokości minimalnej i skutecznie zastępować deklaracje w wyższych rozdzielczościach bez użycia silniejszych selektorów lub szerokości maksymalnej ..?

Answer 1

będę oczekiwać, kiedy jestem w uchwałach 600px i powyżej, aby uzyskać h2 2.2em, ale zamiast dostać 1.7em .. W moich narzędzi Dev widzę, że deklaracja 2.2em ma, ale drugi ma pierwszeństwo ... To nie ma sensu!

Ma to sens. Jeśli nośnik spełnia wartość min-width: 600px, powinien również spełniać wartość min-width: 320px; innymi słowy, wszystko, co ma co najmniej 600 pikseli szerokości ma również co najmniej 320 pikseli szerokości, ponieważ 600 jest większe niż 320.

Ponieważ oba media oceniają wartość true, reguła, która występuje jako ostatnia, ma pierwszeństwo w kaskadzie, powodując Twój kod równoważne to:

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

to wyjaśnia, dlaczego 2.2em pojawia się w dostarczaniu narzędzi programistycznych, ale nie ma wyraźnego wpływu.

Najprostszym rozwiązaniem jest przełączenie swoje @media bloków wokół, więc reguły kaskadę w odpowiedniej kolejności:

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