Comment créer une typographie sensible sur Underscores (wordpress)?

Question

Essayer de comprendre comment utiliser les traits de soulignement. Avant, pour faire la typographie police réactive pour les écrans différents, je généralement écrire différentes requêtes des médias comme suit:

@media screen and (min-width: 480px) { 
    html{ 
     font-size: 18px; 
    } 
    h1 { 
     font-size: 2rem; 
    } 
    h2 { 
     font-size: 1rem; 
    } 
     etc.. 
} 

    @media screen and (min-width: 700px) { 
     html{ 
      font-size: 14px; 
     } 
     h1 { 
      font-size: 0.5rem; 
     } 
     h2 { 
      font-size: 1.3rem; 
     } 
      etc.. 
    } 

En utilisant underscores, comment puis-je changer la taille de la police parent de sorte que les éléments enfants peuvent avoir une taille rem?

J'ai essayé d'ajouter la taille de la police comme il semble être l'élément parent (?)

/*-------------------------------------------------------------- 
# Typography 
--------------------------------------------------------------*/ 
body, 
button, 
input, 
select, 
optgroup, 
textarea { 
    color: #404040; 
    font-family: Merriweather, sans-serif; 
    font-size:20px; 
    font-size: 1rem; 
    line-height: 1.5; 
    color:red; 


} 

Quelle serait la meilleure approche pour cela?

Answer 1

Vous l'avez presque compris. Si vous utilisez rem de la seule chose que vous devez contrôler toutes vos polices en fonction de la fenêtre est de changer la taille de la police de l'élément racine permet de dire html:

html { 
    font-size: 12px; 
} 

p { 
    font-size: 1.1rem; 
} 

.footer { 
    font-size: .9rem; 
} 

@media (max-width: 767px) { 
    /* now the basis for all the font sizes set in 
    rems is 10px. For example, font-size for p is 10*1.1 = 11px. 
    Previously it was 1.1*12 = 13.2px. */ 
    html { 
     font-size: 10px; 
    } 
} 

vous pouvez également utiliser ce qu'on appelle fluid typography et combiner avec l'approche précédente pour obtenir la réactivité (des polices de caractères échelle sur chaque tentative de redimensionnement, non seulement après avoir certaines limites):

html { 
    font-size: calc(14px + (26 - 14) * ((100vw - 300px)/(1600 - 300))); 
} 

Il adapte la taille de la police pour html dans 14px - 26px gamme en fonction de la fenêtre tailles 300px - 1600px .

PS. D'ailleurs, ici

font-size:20px; 
font-size: 1rem; 

vous premier jeu 20px puis réécrire avec 1REM, donc il n'a pas eu d'effet. Vous souhaitez peut-être supprimer font-size: 1rem;. Il définir la taille de police égale à 20px pour élément parent (corps), mais aussi il le fera pour d'autres éléments qui y sont données (entrées, boutons, etc.) approche impliquant élément html est commun et il est plus propre.