Taille de la police Responsive

Question

J'ai créé un site à l'aide de la Zurb Foundation 3 de la grille. Chaque page a un grand h1.

CSS

body {font-size:100%}
/* Headers */
h1 { font-size:6.2em;font-weight:500; }

HTML

<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div><!-- End Tagline -->
</div><!-- End Row -->

Quand j'ai redimensionner le navigateur de mobile taille de la police de grande taille n'ajuste pas et provoque le navigateur inclure une barre de défilement horizontale pour accueillir pour la taille du texte.

J'ai remarqué que sur le Zurb Foundation 3 Typographie exemple de page (http://foundation.zurb.com/old-docs/f3/typography.php), les en-têtes s'adapter au navigateur qu'il est compressé et élargi.

Ai-je raté quelque chose d'évident? Comment puis-je y parvenir?

Answer 1

Vous pouvez utiliser la valeur viewport au lieu de SME, pxs ou pts.

1vw = 1 % de la largeur de la fenêtre d’affichage

1vh = 1 % de la hauteur de la fenêtre d’affichage

1vmin = 1vw ou 1vh, selon ce qui est plus petit

1vmax = 1vw ou 1vh, selon ce qui est plus grand

de Css-astuces : http://css-tricks.com/viewport-sized-typography/

Answer 2

J'ai peur que cela ne fonctionne pas comme vous le pensez ici.

L' font-size ne réagissent pas comme ça avec le redimensionnement de la fenêtre du navigateur. Au lieu de cela ils répondent à la zoom du navigateur/type de paramètres de taille, comme si vous vous appuyez sur les touches ctrl et + ensemble sur le clavier dans le navigateur.

Vous avez à regarder à l'aide de requêtes de média afin de réduire la taille de police à certains intervalles où il commence à casser votre conception et création de barres de défilement.

Par exemple à l'intérieur de votre CSS, essayez d'ajouter ceci au bas de changer le 320px de largeur de partout où votre conception commence la rupture:

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

   body { font-size: 2em; }

}

Answer 3

Utiliser les CSS `` spécificateurs (c’est ce qu’ils [zurb] utilisent) pour une coiffure adaptée :

Answer 4

Si cela ne vous dérange pas d'utiliser une solution jQuery, vous pouvez essayer le plugin TextFill

jQuery TextFill redimensionne le texte pour l'insérer dans un conteneur et rend la taille de la police aussi grande que possible.

https://github.com/jquery-textfill/jquery-textfill

Answer 5

Il y a plusieurs moyens d'y parvenir

L'utilisation des médias de la requête , mais nécessite des tailles de police pour plusieurs points d'arrêt

body
{
       font-size: 22px; 
}
h1
{
       font-size:44px;
}

@media (min-width: 768)
{
       body
       {
           font-size: 17px; 
       }
       h1
       {
           font-size:24px;
       }
}

Utiliser des dimensions en % ou em. Juste le changement de la base taille de la police tout va changer. Contrairement à la précédente, vous pouvez simplement modifier la police du corps de texte et pas de h1, à chaque fois, ou laissez la base de la taille de police par défaut de l'appareil et de repos tout en em

1. "Ems" (em): "em" est une solution évolutive à l'unité. Un em est égal au courant de taille de police, par exemple, si la taille de police du document est 12pt, cadratin (1 em est égal à 12pt. Ems sont évolutives dans la nature, donc 2em serait égal à 24pt, .5em serait égal à 6 pts, etc..
2. Pourcentage (%): pourcentage de l'unité est un peu comme l'unité "em", à l'exception de quelques différences fondamentales. D'abord et avant tout, la police de la taille est égale à 100% (c'est à dire 12pt = 100%). Tout en utilisant le pourcentage de l'unité, le texte reste entièrement modulable pour les appareils mobiles et de l'accessibilité.

voir kyleschaeffer.com/....

CSS3 prend en charge de nouvelles dimensions qui sont relatifs à vue port. Mais cela ne fonctionne pas sur android

1. 3.2 vw = 3.2% de la largeur de la fenêtre d'affichage
2. 3.2 vh = 3.2% de la hauteur du viewport
3. 3.2 vmin = Moins de 3,2 vw ou 3.2 vh

4. 3.2 vmax = Plus de 3,2 vw ou 3.2 vh

   body
   {
       font-size: 3.2vw;
   }
   

voir css-tricks.com/.... et aussi regarder caniuse.com/....