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

Die Textgröße kann mit einer vw-Einheit festgelegt werden, was für "Viewport-Breite" steht. Auf diese Weise passt sich die Textgröße der Größe des Browserfensters an:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

Für mein persönliches Projekt habe ich vw und @media verwendet. Es funktioniert perfekt.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}

.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}

Answer 2

Es gibt folgende Möglichkeiten, dies zu erreichen:

1. Verwenden Sie rem, z.B. 2,3 rem
2. Verwenden Sie em, z.B. 2,3em
3. Verwenden Sie %, z.B. 2,3% Darüber hinaus können Sie verwenden: vh, vw, vmax und vmin.

Diese Einheiten werden automatisch je nach Breite und Höhe des Bildschirms angepasst.

Answer 3

Ich habe diese Lösung gefunden und sie funktioniert sehr gut für mich:

/* Fließende Schriftgröße:
Mindestschriftgröße bei min. Gerätebreite von 300px = 14
Maximalschriftgröße bei max. Gerätebreite von 1600px = 26
*/

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

Answer 4

Eine Möglichkeit, das Problem zu lösen, dass der Text sowohl auf dem Desktop als auch auf dem Mobilgerät/Tablet gut aussieht, besteht darin, die Schriftgröße auf physikalische Einheiten wie Zentimeter oder Zoll festzulegen, die nicht von der Bildschirm-PPI (Punkte pro Zoll) abhängen.

Basierend auf dieser Antwort ist unten der Code, den ich am Ende des HTML-Dokuments für eine responsive Schriftgröße verwende:

  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes

In dem obigen Code werden den Elementen einer unterschiedlichen Klasse Schriftgrößen in physikalischen Einheiten zugewiesen, solange der Browser/das Betriebssystem richtig für die PPI seines Bildschirms konfiguriert ist.

Eine Schriftart in physikalischen Einheiten ist immer weder zu groß noch zu klein, solange der Abstand zum Bildschirm normal ist (Leseabstand für Bücher).

Answer 5

Verwenden Sie diese Gleichung:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

Für alles, was größer oder kleiner als 1440 und 768 ist, können Sie entweder einen statischen Wert angeben oder den gleichen Ansatz anwenden.

Der Nachteil bei der vw-Lösung ist, dass Sie kein Skalierungsverhältnis festlegen können. Wenn Sie beispielsweise eine 5vw bei einer Bildschirmauflösung von 1440 angeben, kann dies dazu führen, dass die Schriftgröße auf 60px skaliert wird, was Ihre gewünschte Schriftgröße ist. Wenn Sie jedoch die Fensterbreite auf 768 verkleinern, kann dies 12px betragen, nicht das Minimum, das Sie möchten.

Mit diesem Ansatz können Sie Ihre obere Grenze und untere Grenze festlegen, und die Schriftart skaliert sich dazwischen automatisch.