Taille/poids de police réactif

Question

Je peux réactiver mes images/divs en utilisant des pourcentages.

Comment est-ce que je peux adapter la taille de la police à différentes tailles d'écran?

Answer 1

Je suis tombé sur ce problème récemment et j'ai écrit une solution pour cela qui convient à mes besoins. Peut-être que vous trouverez que vous pouvez l'intégrer dans votre CSS aussi bien.

github.com/wadim/responsive-font-size

Utilisation:

@import "responsive-font-size"; 

p { 
    @include responsive-font-size (
     $min-font-size: 1.8em, 
     $max-font-size: 3.7em, 
     $min-screen-width: 640px, 
     $max-screen-width: 1200px, 
     $font-size-step: 0.3em /* optional parameter, default: 0.1em */ 
    ); 
} 

Il dit essentiellement:

• pour la largeur de l'écran plus petit que 640px Je veux la taille de la police pour être 1.8em
• pour la largeur de l'écran plus de 1200px je veux que ce soit 3.7em
• échelle police e appropriée entre
• ne prend pas la peine de changer la taille des caractères de moins de 0.3em

Answer 2

Si vous souhaitez que le paramètre change lorsque vous atteignez des jalons de largeur (par exemple 768px, 370px, etc.), utilisez une requête de média CSS3. Si vous voulez que cela change constamment, vous pouvez utiliser le même pourcentage, ou em, technique qu'avec les images/divs (c.-à-d. Target/context = result), mais je suggérerais des requêtes média.

Answer 3

Selon le tableau de navigateurs, vous devez prendre en charge, CSS3 longueurs Viewport-pourcentage pourrait être une bonne solution:

http://css-tricks.com/viewport-sized-typography/

http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

J'ai décidé de cette approche car elle est prise en charge uniquement sur iOS6 et non Android, et mon projet est un comprimé & site mobile de smartphone.

Answer 4

Vous pouvez utiliser CSS3 vh, vw, vmin et vmax nouvelles valeurs pour la police réactive.

1vw = 1% de la largeur de la fenêtre

1VH = 1% de la hauteur de la fenêtre

1vmin = 1vw ou 1VH, selon la plus petite

1vmax = 1vw ou 1VH, celui qui est le plus grand

h1 { 
font-size: 5.9vw; 
} 
h2 { 
font-size: 3.0vh; 
} 
p { 
font-size: 2vmin; 
}