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

Dies ist teilweise in foundation 5 implementiert.

In der Datei _type.scss haben sie zwei Sätze von Kopfzeilenvariablen:

// Wir nutzen diese, um die Schriftgrößen der Kopfzeilen zu kontrollieren
// für mittlere Bildschirme und größer

$h1-schriftgröße: rem-calc(44) !default;
$h2-schriftgröße: rem-calc(37) !default;
$h3-schriftgröße: rem-calc(27) !default;
$h4-schriftgröße: rem-calc(23) !default;
$h5-schriftgröße: rem-calc(18) !default;
$h6-schriftgröße: 1rem !default;

// Wir nutzen diese, um die Verkleinerung der Kopfzeilen auf kleinen Bildschirmen zu kontrollieren
$h1-Verkleinerung: rem-calc(10) !default;
$h2-Verkleinerung: rem-calc(10) !default;
$h3-Verkleinerung: rem-calc(5) !default;
$h4-Verkleinerung: rem-calc(5) !default;
$h5-Verkleinerung: 0 !default;
$h6-Verkleinerung: 0 !default;

Für mittlere Bildschirme oder größer generieren sie Größen basierend auf dem ersten Satz Variablen:

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-schriftgröße; }
    h2 { font-size: $h2-schriftgröße; }
    h3 { font-size: $h3-schriftgröße; }
    h4 { font-size: $h4-schriftgröße; }
    h5 { font-size: $h5-schriftgröße; }
    h6 { font-size: $h6-schriftgröße; }
}

Und für Standard, also kleine Bildschirme, nutzen sie einen zweiten Satz Variablen, um CSS zu generieren:

h1 { font-size: $h1-schriftgröße - $h1-Verkleinerung; }
h2 { font-size: $h2-schriftgröße - $h2-Verkleinerung; }
h3 { font-size: $h3-schriftgröße - $h3-Verkleinerung; }
h4 { font-size: $h4-schriftgröße - $h4-Verkleinerung; }
h5 { font-size: $h5-schriftgröße - $h5-Verkleinerung; }
h6 { font-size: $h6-schriftgröße - $h6-Verkleinerung; }

Sie können diese Variablen verwenden und in Ihrer eigenen SCSS-Datei überschreiben, um die Schriftgrößen für die jeweiligen Bildschirmgrößen festzulegen.

Answer 2

Eine responsive Schriftgröße kann auch mit diesem JavaScript-Code namens FlowType erreicht werden:

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - Responsive Web-Typografie in ihrer besten Form: Schriftgröße basierend auf der Elementbreite.

Oder mit diesem JavaScript-Code namens FitText:

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - Macht Schriftgrößen flexibel. Verwenden Sie dieses Plugin in Ihrem responsiven Design für größenbasierte Anpassung Ihrer Überschriften.

Answer 3

Wenn Sie ein Build-Tool verwenden, probieren Sie es mit Rucksack aus.

Andernfalls können Sie CSS-Variablen (benutzerdefinierte Eigenschaften) verwenden, um die minimalen und maximalen Schriftgrößen leicht zu steuern, wie folgt (Demo):

* {
  /* Berechnung */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Bereich von 421px bis 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Answer 4

Ich hatte gerade eine Idee, mit der man die Schriftgröße pro Element nur einmal definieren muss, aber sie wird immer noch von den Media Queries beeinflusst.

Zuerst setze ich die Variable "--text-scale-unit" je nach Viewport mit den Media Queries auf "1vh" oder "1vw".

Dann verwende ich die Variable mit calc() und meinem Multiplikationsfaktor für die Schriftgröße:

/* Definiere eine Variable basierend auf der Ausrichtung. */
/* Der Wert kann angepasst werden, um deinen Bedürfnissen gerecht zu werden. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}

/* Verwende eine Variable mit calc und Multiplikation. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}

  Responsive

  Text

  mit nur einem

  Schriftgröße-Tag.

In meinem Beispiel habe ich nur die Ausrichtung des Viewports verwendet, aber das Prinzip sollte mit beliebigen Media Queries möglich sein.

Answer 5

Es gibt viele Antworten, aber ich habe niemanden erwähnen sehen, dass die min- oder max-Funktionen in Kombination mit Media Queries verwendet werden können.

Es gibt eine max() Funktion in CSS, so wird unser obiges Beispiel zu einer einzigen Zeile:

font-size: max(30vw, 30px);

Oder kombinieren Sie es mit einer min- und max-Funktion:

font-size: min(max(16px, 4vw), 22px);

Was identisch ist mit:

font-size: clamp(16px, 4vw, 22px);

Vergessen Sie dann nicht, dies in eine Media Query zu setzen und es auf Ihre h1, h2, h3, h4, h5, h6 anzuwenden, wie Sie möchten.

    @media (max-width: 600px) {
      h1 {
           font-size: clamp(16px, 4vw, 22px);
         }
    }