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

Sie können den viewport-Wert anstelle von ems, pxs oder pts verwenden:

1vw = 1% der Viewport-Breite

1vh = 1% der Viewport-Höhe

1vmin = 1vw oder 1vh, je nachdem, was kleiner ist

1vmax = 1vw oder 1vh, je nachdem, was größer ist

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

Von CSS-Tricks: Viewport Größenabhängige Typografie

Answer 2

Die font-size reagiert nicht auf das Ändern der Browserfenstergröße. Stattdessen reagieren sie auf die Browser-Zoom-/Schriftgröße-Einstellungen, zum Beispiel wenn Sie Strg und + zusammen auf der Tastatur im Browser drücken.

Medienabfragen

Sie müssten Medienabfragen verwenden, um die Schriftgröße in bestimmten Intervallen zu reduzieren, in denen Ihr Design zu brechen beginnt und Scrollbalken erstellt.

Versuchen Sie zum Beispiel, dies in Ihr CSS am Ende hinzuzufügen, wobei Sie die Breite von 320 Pixeln ändern, wo Ihr Design zu brechen beginnt:

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

   body { 
      font-size: 2em; 
   }

}

Viewport-Prozentsatzlängen

Sie können auch Viewport-Prozentsatzlängen verwenden, wie z.B. vw, vh, vmin und vmax. Das offizielle W3C-Dokument dazu besagt:

Die Viewport-Prozentsatzlängen sind relativ zur Größe des initialen enthaltenden Blocks. Wenn die Höhe oder Breite des initialen enthaltenden Blocks geändert wird, werden sie entsprechend skaliert.

Aus demselben W3C-Dokument können die einzelnen Einheiten wie folgt definiert werden:

vw-Einheit - Gleich 1% der Breite des initialen enthaltenden Blocks.

vh-Einheit - Gleich 1% der Höhe des initialen enthaltenden Blocks.

vmin-Einheit - Gleich dem kleineren Wert von vw oder vh.

vmax-Einheit - Gleich dem größeren Wert von vw oder vh.

Und sie werden genauso verwendet wie jeder andere CSS-Wert:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Die Kompatibilität ist relativ gut, wie hier gesehen werden kann hier. Einige Versionen von Internet Explorer und Edge unterstützen jedoch vmax nicht. Auch iOS 6 und 7 haben ein Problem mit der vh-Einheit, das in iOS 8 behoben wurde.

Answer 3

h1{
  font-size : clamp(2rem, 10vw, 5rem);
}

hier hat clamp 3 Argumente.

• das erste ist die minimale erlaubte Schriftgröße.

• das dritte ist die maximale erlaubte Schriftgröße.

• das zweite Argument ist die Schriftgröße, die Sie immer haben möchten. Die Einheit muss relativ sein (vw, vh, ch) und nicht absolut (d. h. nicht px, mm, pt). Die relative Einheit lässt sie ihre Größe relativ zu den sich ändernden Bildschirmgrößen ändern.

Betrachten Sie ein Beispiel : nehmen wir an, es gibt ein großes Fontawesome-Symbol, das Sie dynamisch ändern möchten (ansprechendes Symbol)

fa-random-icon{
   font-size: clamp( 15rem, 80vw, 80vh)   
}

• Hier ist 80vw die bevorzugte Schriftgröße.
• 15 rem ist die minimale Schriftgröße (untere Grenze).
• 80vh ist die maximale Schriftgröße (obere Grenze).

d. h.

• wenn auf einem bestimmten mobilen Bildschirm 80vw < 15rem ist, dann ist die Schriftgröße 15rem.

• wenn der Bildschirm zu breit ist und 80vw > 80vh ist, dann ist die Schriftgröße 80vh.

Die oben genannten Methoden, die von Menschen vorgeschlagen werden, haben immer ein etwas unsicheres Ergebnis... wie wenn wir nur vw verwenden, kann die Schriftgröße manchmal zu groß oder zu klein sein (ungebunden).

@media-Anfragen können verwendet werden, aber Sie müssen mindestens 3 Media-Queries verwenden, um die Schriftgröße ansprechend zu gestalten

Answer 4

Ich habe herumgespielt, um Möglichkeiten zu finden, dieses Problem zu überwinden, und glaube, ich habe eine Lösung gefunden:

Wenn Sie Ihre Anwendung für Internet Explorer 9 (und höher) und alle anderen modernen Browser schreiben können, die CSS calc(), rem-Einheiten und vmin-Einheiten unterstützen. Sie können dies verwenden, um skalierbaren Text ohne Media Queries zu erreichen:

body {
  font-size: calc(0.75em + 1vmin);
}

Hier ist es in Aktion: http://codepen.io/csuwldcat/pen/qOqVNO

Answer 5

Verwenden Sie CSS media-Spezifikatoren (das ist, was sie [Zurb] verwenden) für responsives Styling:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}