Medien-Anfragen werden nicht vor Ort sind

Question

angewendet Ich bin neu in diesem und ich bin wahrscheinlich etwas falsch

tun Dies ist mein CSS mit meinem Medien-Anfragen ist:

.box h3 { 
    position: absolute; 
    left: 11%; 
    top: 12%; 
    font-size: 2rem; 
    color: white; 
    text-shadow: 0rem 1rem 1.9rem #888888; 
    z-index: 10; 
} 

.box p { 
    position: absolute; 
    left: 11%; 
    top: 38%; 
    font-size: 0.8rem; 
    color: white; 
    text-shadow: 0rem 1rem 1.9rem black; 
    z-index: 10; 
} 

@media (min-width: 97rem;) { 
.box h3 { 
    position: absolute; 
    left: 11%; 
    top: 12%; 
    font-size: 6rem; 
    color: white; 
    text-shadow: 0rem 1rem 1.9rem #888888; 
    z-index: 10; 
} 

.box p { 
    position: absolute; 
    left: 11%; 
    top: 38%; 
    font-size: 1.8rem; 
    color: white; 
    text-shadow: 0rem 1rem 1.9rem black; 
    z-index: 10; 
} 
} 

ich nur chaning die Schriftart Größe, um meinen Code zu testen, aber es funktioniert nicht.

Ich habe das Viewport-Tag in meinem HTML-Kopf hinzugefügt.

Edit:

Answer 1

Ich habe px statt rem verwendet und jetzt funktioniert es, ist das erklärbar?

@media (min-width: 970px) { 

Answer 2

Statt dessen:

@media (min-width: 97rem;) {

versuchen Sie dies:

@media all and (min-width: 97rem) {

Answer 3

Es sollte funktionieren, wenn Sie das Semikolon am Ende des min-width entfernen Erklärung.

@media (min-width: 97rem)