Responsive Schriftgröße in CSS

Question

Ich habe eine Website mit dem Zurb Foundation 3 Grid erstellt. Jede Seite hat ein großes h1:

body {
  font-size: 100%
}

/* Überschriften */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

     GROSSER HEADER TAGLINE 

Wenn ich den Browser auf die Größe für mobile Geräte verkleinere, passt sich die große Schriftgröße nicht an und verursacht einen horizontalen Bildlauf, um Platz für den großen Text zu schaffen.

Ich habe festgestellt, dass auf der Zurb Foundation 3 -Typografie Beispiel-Seite die Überschriften sich an den Browser anpassen, wenn er verkleinert und erweitert wird.

Übersehe ich etwas wirklich Offensichtliches? Wie erreiche ich das?

Answer 1

Wenn Sie nichts dagegen haben, eine jQuery-Lösung zu verwenden, können Sie das TextFill-Plugin ausprobieren

jQuery TextFill ändert die Textgröße, um sie in einen Container passen zu lassen und macht die Schriftgröße so groß wie möglich.

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

Answer 2

Es gibt mehrere Möglichkeiten, dies zu erreichen.

Verwenden Sie eine Media Query, aber es erfordert Schriftgrößen für mehrere Breakpoints:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

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

Verwenden Sie Abmessungen in % oder em. Ändern Sie einfach die Basisschriftgröße, und alles wird sich ändern. Im Gegensatz zum vorherigen Beispiel könnten Sie einfach die Schriftart des Textkörpers ändern und nicht jedes Mal auch die von h1, oder lassen Sie die Basisschriftgröße die Standardgröße des Geräts sein und den Rest alles in em:

1. “Ems” (em): Das "em" ist eine skalierbare Einheit. Ein em entspricht der aktuellen Schriftgröße, wenn z.B. die Schriftgröße des Dokuments 12 pt beträgt, ist 1 em gleich 12 pt. Ems sind skalierbar, sodass 2 em 24 pt entsprechen würden, .5 em würden 6 pt entsprechen, usw..
2. Prozent (%): Die Prozentuale Einheit ähnelt der "em"-Einheit, hat aber einige grundlegende Unterschiede. Zunächst einmal entspricht die aktuelle Schriftgröße 100% (d.h. 12 pt = 100%). Bei Verwendung der Prozent-Einheit bleibt Ihr Text vollständig skalierbar für mobile Geräte und die Barrierefreiheit.

Siehe kyleschaeffer.com/....

CSS 3 unterstützt neue Dimensionen, die relativ zum Viewport sind. Aber dies funktioniert nicht auf Android:

1. 3.2vw = 3,2% der Breite des Viewports
2. 3.2vh = 3,2% der Höhe des Viewports
3. 3.2vmin = Kleineres von 3,2vw oder 3,2vh

4. 3.2vmax = Größeres von 3,2vw oder 3,2vh

   body
   {
       font-size: 3.2vw;
   }

Siehe CSS-Tricks ... und schauen Sie auch auf Can I Use...

Answer 3

Es gibt einen weiteren Ansatz für responsive Schriftgrößen - die Verwendung von rem-Einheiten.

html {
    /* Basisschriftgröße */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Später in den Media Queries können Sie alle Schriftgrößen anpassen, indem Sie die Basisschriftgröße ändern:

@media screen and (max-width: 767px) {
    html {
      /* Durch die Verringerung der Basisschriftgröße werden alle rem-Größen reduziert */
      font-size: 13px;
    }

    /* Sie können die Schriftgrößen auch manuell reduzieren */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

Um dies in Internet Explorer 7 und Internet Explorer 8 zum Laufen zu bringen, müssen Sie eine Rückfalllösung mit px-Einheiten hinzufügen:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

Wenn Sie mit Less entwickeln, können Sie sich einen Mixin erstellen, der die Berechnungen für Sie durchführt.

Rem-Einheiten Unterstützung - http://caniuse.com/#feat=rem

Answer 4

Die "vw"-Lösung hat ein Problem bei sehr kleinen Bildschirmen. Sie können die Grundgröße festlegen und von dort aus mit calc() weitermachen:

font-size: calc(16px + 0.4vw);

Answer 5

Ich habe einen großartigen Artikel von CSS-Tricks gesehen. Es funktioniert einwandfrei:

body {
    font-size: calc([Mindestgröße] + ([Höchstgröße] - [Mindestgröße]) * ((100vw -
    [Mindestansichtsbreite]) / ([Höchstansichtsbreite] - [Mindestansichtsbreite])));
}

Zum Beispiel:

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

Wir können dieselbe Gleichung auch auf die line-height-Eigenschaft anwenden, um sie ebenfalls mit dem Browser ändern zu lassen.

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}