Mobil-First Media Queries nicht original CSS überschreiben

Lassen Sie uns sagen, ich habe diese:Mobil-First Media Queries nicht original CSS überschreiben

.about_text { 
    font-weight: 300; 
    font-size: 1.125rem; 
}

Und:

@media screen and (min-width: 64em) { 
    .about_text { 
     font-weight: 600; 
     font-size: 1.500rem; 
    } 
}

Wenn ich nicht wichtig, es überschreibt nicht die ursprüngliche CSS ... Warum kann das sein? Ich benutze weniger auf einer Wordpress-Seite, aber ich habe es unzählige Male getan und das ist noch nie passiert. Ich kümmere mich um die Medienabfragen, die hinter dem ursprünglichen CSS stehen.

Quelle

2016-11-16 nakkeru

Können Sie ein Beispiel angeben, wo es nicht funktioniert? – brouxhaha

versuchen Cascading mit für die Abfrage Medien wie folgt, wenn Sie die Medienabfrage wollen die CSS-Stile verwenden -

@media screen and (min-width: 64em) { 
    div .about_text { 
     font-weight: 600; 
     font-size: 1.500rem; 
     } 
    }

Quelle

2016-11-16 22:18:25 ross

Und Sie verwenden min-width, so dass es nur wirksam werden kann, wenn der Bildschirm 64em (1024px) oder mehr ist. Und wenn ich das überprüfte, werden Ihre Medienabfrageformate für 1024px und mehr angewendet. – ross

Das wird nichts ändern. Alles, was Sie tun, ist mehr Spezifität zu schaffen. – brouxhaha

Verwenden Sie auch Pixel für Medienabfragen, da Sie sich hinsichtlich des Pixelwerts nie sicher sein können. – ross

Ihr Code von selbst gut aussieht. Es kann andere Probleme geben, die sich gegenseitig widersprechen. Wenn nicht, haben Sie wahrscheinlich ein Problem mit dem Auslösepunkt Ihrer Medienanfrage.

Verwenden Sie eine px-basierte Form der Messung anstelle von em für Ihre Medienabfragen. Ems sind relativ, während px absolut sind und konsistentere Ergebnisse liefern.

@media screen and (min-width: 480px) { 
 
    .about_text { 
 
    font-weight: 600; 
 
    font-size: 1.500rem; 
 
    } 
 
}

Quelle

2016-11-16 22:23:07

Die Verwendung von 'em' ist in Ordnung und ist eigentlich eine bessere Möglichkeit, Medienabfragen zu verwenden. Ändern Sie es zu "px" wird nicht ändern, wie es funktioniert. – brouxhaha

Solange die Basisschriftart nicht auf etwas Unangenehmes eingestellt ist, dann funktioniert das genauso gut. Wenn das nicht das Problem ist, dann gibt es höchstwahrscheinlich ein anderes Problem, das verhindert, dass die Medienanfrage Präzedenzfälle hat. –

die Sie interessieren,

.about_text { 
font-weight: 600; 
font-size: 1.500rem;} 

@media screen and (max-width: 64em) { 
.about_text { 
    font-weight: 300; 
    font-size: 1.125rem;  
}

}

Ihre Medienabfrage für mobile Geräte nicht bewirbt, ist es nur für Desktop-oder größere Größe anzuwenden ist.

Quelle

2016-11-21 05:34:00 NPN

Mobil-First Media Queries nicht original CSS überschreiben

Antwort

Verwandte Themen