Schriftgröße erben Steuerelement auf mobilen Geräten

Question

Ich verwalte eine neue Website, wo ich ein Problem mit Schriftgrößen habe. Auf der Desktop-Version sieht es gut aus, aber auf mobilen Geräten ist der Text viel zu groß.

.blog { 

     h2 { 
      a { 
       font-size:inherit; 
       font-weight:inherit; 
       color:inherit; 
      } 
     } 

Wie kann ich die Schriftart auf mobilen Geräten steuern? Kann ich etwas hinzufügen wie:

@media screen and (max-width: 768px){ 

     .h1, h1 { 
      font-size: 1.5em; 
     } 
     .h2, h2 { 
     font-size: 26px; 
     } 

oder ist das der falsche Weg, es zu tun?

Mit dieser Lösung würde der Code aussehen ?:

.blog { 

     h2 { 
      a { 
       font-size:inherit; 
       font-weight:inherit; 
       color:inherit; 
      } 


     @media screen and (max-width: 768px){ 

     .h1, h1 { 
      font-size: 16px; 
     } 
     .h2, h2 { 
     font-size: 12px; 
     } 
} 

Answer 1

Es ist eine richtige Art und Weise, es zu benutzen.

sind jedoch hier einige Tipps:

Prefear mit px über em

, weil die Interpretation von em und ex auf dem OS abhängt. px zeigt die gleiche Größe an, unabhängig davon, welches Betriebssystem Sie verwenden.

können Sie relative Werte verwenden: %

% wird die Schriftgröße proportional zu seiner Eltern Schriftgröße machen. Dies ist sehr gut für Responsive Design, so dass Sie nur eine Schriftgröße, die Eltern ändern.

Sie können this link für weitere Informationen zu welcher Einheit verwenden und warum.

EDIT:

Ihr Code benötigt, um einige Korrekturen: Ihr CSS einige } verpassten so fixiert ich es und war in der Lage, um Ihren Code Arbeit zu machen.

.blog { 

    h2 { 
     a { 
      font-size:inherit; 
      font-weight:inherit; 
      color:inherit; 
      } 
     } 


    @media screen and (max-width: 768px){ 

    .h1, h1 { 
     font-size: 16px; 
     } 
    .h2, h2 { 
     font-size: 12px; 
     } 
    } 
} 

JSFiddle here