CSS Mobile Definition wird nicht angewendet?

Question

Ich habe eine Website here gemacht. Es funktioniert gut auf allen Bildschirmen außer Handy, wo der Slogan zu groß ist. Also habe ich eine mobile CSS-Definition für den Slogan "Immer Coding und Brauen etwas Gutes" hinzugefügt, aber auf meinem Handy tut es nichts? Ich benutze Bootstrap aber nur mit dem Grid und responsiven Elementen. Die CSS-I in Frage wird die unten angelegt ist:

@media (max-width: 480px) { 
 
\t .grabber{ 
 
\t \t font-size: 12px; 
 
\t } 
 

 
}

Answer 1

Sie in Ihrem stylesheet.css eine Reihenfolge von Arten definiert:

@media (max-width: 480px) { 
    .grabber{ 
     font-size: 12px; 
    } 
} 
.grabber{ 
    color: #3498db; 
    font-size: 2em; 
    font-family: 'black_roseregular', Arial, sans-serif; 
} 

und aufgrund der Verarbeitung CSS- Die Regeln für die neueste Schriftgröße, die auf .grabber angewendet wird, sind font-size: 2em;. Alles, was Sie brauchen, ist diese Anweisungen wie folgt auszutauschen:

.grabber{ 
    color: #3498db; 
    font-size: 2em; 
    font-family: 'black_roseregular', Arial, sans-serif; 
} 
@media screen and (max-width: 480px) { 
    .grabber{ 
     font-size: 12px; 
    } 
}