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

Wie bei vielen Frameworks wird, sobald Sie das Standard-CSS des Frameworks überschreiben, alles links und rechts kaputt gehen. Frameworks sind von Natur aus starr. Wenn Sie Zurb's Standard-H1-Stil zusammen mit ihren Standard-Rasterklassen verwenden würden, sollte die Webseite auf Mobilgeräten ordnungsgemäß angezeigt werden (d.h. responsiv).

Es scheint jedoch, dass Sie sehr große Überschriften von 6,2 em möchten, was bedeutet, dass der Text schrumpfen muss, um auf einem mobilen Display im Hochformat zu passen. Ihre beste Wahl ist die Verwendung eines responsiven Text-JQuery-Plugins wie FlowType und FitText. Wenn Sie etwas Leichtgewichtiges möchten, können Sie mein Skalierbares Text-JQuery-Plugin überprüfen:

http://thdoan.github.io/scalable-text/

Beispielverwendung:

$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}

Answer 2

 h1 { Schriftgröße: 2.25em; } 
 h2 { Schriftgröße: 1.875em; }
 h3 { Schriftgröße: 1.5em; }
 h4 { Schriftgröße: 1.125em; }
 h5 { Schriftgröße: 0.875em; }
 h6 { Schriftgröße: 0.75em; }

Answer 3

Sie können die Schriftgröße responsiv gestalten, indem Sie diese in vw (Viewport-Breite) definieren. Allerdings wird dies nicht von allen Browsern unterstützt. Die Lösung besteht darin, JavaScript zu verwenden, um die Basis-Schriftgröße je nach Browser-Breite zu ändern und alle Schriftgrößen in % festzulegen.

Hier ist ein Artikel, der beschreibt, wie man responsive Schriftgrößen erstellt: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Answer 4

Nach vielen Schlussfolgerungen bin ich zu dieser Kombination gekommen:

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

    h2 {
        font-size: 4.3vw;
    }
}

Answer 5

Legen Sie Ihre Basis-Schriftgröße fest und begrenzen Sie sie mit der Clamp-Funktion.

Die Verwendung von clamp() für Schriftgrößen, wie in diesen Beispielen, ermöglicht es Ihnen, eine Schriftgröße festzulegen, die mit der Größe des Viewports wächst, aber nicht unter eine minimale Schriftgröße fällt.

Clamp-Methode MDN-Dokumentation

Hier ist ein Beispiel.

h1 { font-size: clamp(1.5em, 4vw, 2.5em); }
h2 { font-size: clamp(1.2em, 4vw, 2.4em); }
p  { font-size: clamp(0.6em, 4vw, 1.2em); }