Reaktionsschnelle Schriftgröße in CSS

Ich habe eine Site mit dem Raster der Zurb Foundation 3 erstellt . Jede Seite hat eine große h1:

body {
  font-size: 100%
}

/* Headers */

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

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

Wenn ich die Größe des Browsers auf die Größe eines Mobiltelefons ändere, wird die große Schrift nicht angepasst und der Browser enthält einen horizontalen Bildlauf, um den großen Text aufzunehmen.

Ich habe festgestellt, dass sich die Header auf der Beispielseite der Zurb Foundation 3- Typografie an den Browser anpassen, wenn dieser komprimiert und erweitert wird.

Vermisse ich etwas wirklich Offensichtliches? Wie erreiche ich das?

Sie font-sizereagieren nicht so, wenn Sie die Größe des Browserfensters ändern. Stattdessen reagieren sie auf die Browser - Zoom / Typ Größe Einstellungen, wie wenn Sie drücken Ctrlund +zusammen auf der Tastatur , während im Browser.

Medien-Anfragen

Sie müssten Medienabfragen verwenden , um die Schriftgröße in bestimmten Intervallen zu verringern, in denen Ihr Design beschädigt und Bildlaufleisten erstellt werden.

Versuchen Sie beispielsweise, dies in Ihrem CSS unten hinzuzufügen, und ändern Sie die Breite von 320 Pixel, wenn Ihr Design zu brechen beginnt:

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

   body { 
      font-size: 2em; 
   }

}

Prozentuale Länge des Ansichtsfensters

Sie können auch verwenden Ansichtsfenster Prozent Längen wie vw, vh, vminund vmax. Das offizielle W3C-Dokument dazu lautet:

Die prozentualen Längen des Ansichtsfensters beziehen sich auf die Größe des anfänglichen enthaltenden Blocks. Wenn die Höhe oder Breite des anfänglich enthaltenen Blocks geändert wird, werden sie entsprechend skaliert.

Aus demselben W3C-Dokument kann wiederum jede einzelne Einheit wie folgt definiert werden:

vw unit - Entspricht 1% der Breite des anfänglichen Blocks.

vh unit - Entspricht 1% der Höhe des anfänglich enthaltenden Blocks.

vmin unit - Entspricht dem kleineren Wert von vw oder vh.

vmax unit - Entspricht dem größeren Wert von vw oder vh.

Und sie werden genauso verwendet wie alle anderen CSS-Werte:

.text {
  font-size: 3vw;
}

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

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

Sie können den Ansichtsfensterwert anstelle von ems, pxs oder pts verwenden:

1vw = 1% der Breite des Ansichtsfensters

1vh = 1% der Höhe des Ansichtsfensters

1vmin = 1vw oder 1vh, je nachdem, welcher Wert kleiner ist

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

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

Aus CSS-Tricks: Typografie in Ansichtsfenstergröße

Ich habe mit Möglichkeiten herumgespielt, um dieses Problem zu lösen, 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 Medienabfragen zu erhalten:

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

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

Verwenden Sie CSS- mediaSpezifizierer (das verwenden sie [zurb]) für das reaktionsschnelle Styling:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Wenn es Ihnen nichts ausmacht, eine jQuery-Lösung zu verwenden, können Sie das TextFill-Plugin ausprobieren

jQuery TextFill ändert die Größe von Text so, dass er in einen Container passt, und macht die Schriftgröße so groß wie möglich.

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

Es gibt verschiedene Möglichkeiten, dies zu erreichen.

Verwenden Sie eine Medienabfrage , die jedoch Schriftgrößen für mehrere Haltepunkte erfordert:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

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

Verwenden Sie die Abmessungen in % oder em . Ändern Sie einfach die Grundschriftgröße, und alles wird sich ändern. Im Gegensatz zum vorherigen können Sie einfach die Hauptschriftart und nicht jedes Mal h1 ändern oder die Basisschriftgröße als Standard für das Gerät festlegen und den Rest in em:

1. "Ems" (em) : Das "em" ist eine skalierbare Einheit. Ein em entspricht der aktuellen Schriftgröße. Wenn beispielsweise die Schriftgröße des Dokuments 12 pt beträgt, entspricht 1 em 12 pt. Ems sind von Natur aus skalierbar, sodass 2 em 24 pt entsprechen, 0,5 em 6 pt usw.
2. Prozent (%) : Die prozentuale Einheit ähnelt der „em“ -Einheit, abgesehen von einigen grundlegenden Unterschieden. In erster Linie entspricht die aktuelle Schriftgröße 100% (dh 12 pt = 100%). Während Sie die Prozenteinheit verwenden, bleibt Ihr Text für mobile Geräte und für die Barrierefreiheit vollständig skalierbar.

Siehe kyleschaeffer.com / ....

CSS 3 unterstützt neue Dimensionen, die relativ zum Ansichtsfenster sind. Dies funktioniert jedoch nicht unter Android:

1. 3,2vw = 3,2% der Breite des Ansichtsfensters
2. 3,2vh = 3,2% der Höhe des Ansichtsfensters
3. 3,2 vmin = kleiner als 3,2 vw oder 3,2 vh

4. 3,2 vmax = größer als 3,2 vw oder 3,2 vh

   body
   {
       font-size: 3.2vw;
   }

Siehe CSS-Tricks ... und siehe auch Kann ich verwenden ...

Es gibt einen anderen Ansatz für reaktionsschnelle Schriftgrößen - die Verwendung von Rem-Einheiten.

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

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

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

Damit dies in Internet Explorer 7 und Internet Explorer 8 funktioniert, müssen Sie einen Fallback mit px-Einheiten hinzufügen:

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

Wenn Sie mit Less entwickeln , können Sie ein Mixin erstellen, das die Mathematik für Sie erledigt.

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

Die "vw" -Lösung hat ein Problem, wenn sehr kleine Bildschirme aufgerufen werden. Sie können die Basisgröße einstellen und von dort mit calc () nach oben gehen:

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

Dies ist teilweise in Stiftung 5 implementiert.

In der Datei _type.scss gibt es zwei Sätze von Header-Variablen:

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

Für mittlere Werte generieren sie Größen basierend auf dem ersten Satz von Variablen:

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

Und für Standardbildschirme, dh kleine Bildschirme, verwenden sie einen zweiten Satz von Variablen, um CSS zu generieren:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

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

Eine reaktionsschnelle 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 vom Feinsten: Schriftgröße basierend auf der Elementbreite.

Oder dieser JavaScript-Code namens FitText :

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

FitText - Macht Schriftgrößen flexibel. Verwenden Sie dieses Plugin in Ihrem Responsive Design für die verhältnisbasierte Größenänderung Ihrer Überschriften.

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

Andernfalls können Sie CSS-Variablen (benutzerdefinierte Eigenschaften) verwenden, um die minimale und maximale Schriftgröße wie folgt einfach zu steuern ( Demo ):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

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

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

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

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Zum Beispiel:

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

Wir können dieselbe Gleichung auf die line-heightEigenschaft anwenden , damit sie sich auch mit dem Browser ändert.

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

Ich hatte gerade eine Idee, bei der Sie die Schriftgröße nur einmal pro Element definieren müssen, die jedoch immer noch von Medienabfragen beeinflusst wird.

Zuerst setze ich die Variable "--text-scale-unit" auf "1vh" oder "1vw", abhängig vom Ansichtsfenster, das die Medienabfragen verwendet.

Dann benutze ich die Variable mit calc () und meiner Multiplikator-Nummer für die Schriftgröße:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.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);
}

<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

In meinem Beispiel habe ich nur die Ausrichtung des Ansichtsfensters verwendet, aber das Prinzip sollte bei allen Medienabfragen möglich sein.

"FitText" von jQuery ist wahrscheinlich die am besten reagierende Header-Lösung. Überprüfen Sie es bei GitHub: https://github.com/davatron5000/FitText.js

Wie bei vielen Frameworks beginnen die Dinge nach links und rechts zu brechen, sobald Sie das Raster verlassen und das Standard-CSS des Frameworks überschreiben. Frameworks sind von Natur aus starr. Wenn Sie den Standard-H1-Stil von Zurb zusammen mit den Standard-Rasterklassen verwenden, sollte die Webseite auf Mobilgeräten ordnungsgemäß angezeigt werden (dh reaktionsschnell).

Es scheint jedoch, dass Sie sehr große 6.2em-Überschriften wünschen, was bedeutet, dass der Text verkleinert werden muss, um im Hochformat in ein mobiles Display zu passen. Am besten verwenden Sie ein responsives Text-jQuery-Plugin wie FlowType und FitText . Wenn Sie etwas Leichtes wollen, können Sie sich mein jQuery-Plugin für skalierbaren Text ansehen:

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

Beispielnutzung:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

Im tatsächlichen Original- Sass (nicht scss) können Sie die folgenden Mixins verwenden, um die Absätze und alle Überschriften automatisch festzulegen font-size.

Ich mag es, weil es viel kompakter ist. Und schneller zu tippen. Davon abgesehen bietet es die gleiche Funktionalität. Wenn Sie sich dennoch an die neue Syntax - scss halten möchten, können Sie meinen Sass-Inhalt hier in scss konvertieren: [SASS HIER IN SCSS UMWANDELN]

Unten gebe ich Ihnen vier Sass-Mixins. Sie müssen ihre Einstellungen an Ihre Bedürfnisse anpassen.

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

Nachdem Sie mit den Einstellungen fertig sind, rufen Sie einfach ein Mixin auf - + config-and-run-font-generator () . Weitere Informationen finden Sie im Code unten und in den Kommentaren.

Ich denke, Sie könnten es automatisch für eine Medienabfrage tun, wie es für Header-Tags getan wird, aber wir alle verwenden unterschiedliche Medienabfragen, so dass es nicht für jeden geeignet wäre. Ich verwende einen Mobile-First-Design-Ansatz, also würde ich das so machen. Fühlen Sie sich frei, diesen Code zu kopieren und zu verwenden.

KOPIEREN UND EINFÜGEN SIE DIESE MISCHUNGEN IN IHRE DATEI:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

KONFIGURIEREN SIE ALLE MISCHUNGEN NACH IHREN BEDÜRFNISSEN - SPIELEN SIE MIT IHM! :) UND RUFEN SIE ES DANN OBEN AUF IHREM TATSÄCHLICHEN SASS-CODE AN:

+config-and-run-font-generator()

Dies würde diese Ausgabe erzeugen. Sie können Parameter anpassen, um verschiedene Ergebnissätze zu generieren. Da wir alle unterschiedliche Medienabfragen verwenden, müssen Sie einige Mixins manuell bearbeiten (Stil und Medien).

GENERIERTES CSS:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}

Ich verwende diese CSS-Klassen und sie machen meinen Text auf jeder Bildschirmgröße flüssig:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

Es gibt folgende Möglichkeiten, wie Sie dies erreichen können:

1. Verwenden Sie rem für zB 2.3 rem
2. Verwenden Sie sie für zB 2.3em
3. Verwenden Sie% für z. B. 2,3%. Außerdem können Sie Folgendes verwenden: vh, vw, vmax und vmin.

Diese Einheiten werden abhängig von der Breite und Höhe des Bildschirms automatisch verkleinert.

Sie können die Schriftgröße anpassen, wenn Sie sie in vw (Breite des Ansichtsfensters) definieren. Es wird jedoch nicht von allen Browsern unterstützt. Die Lösung besteht darin, JavaScript zu verwenden, um die Basisschriftgröße abhängig von der Browserbreite zu ändern und alle Schriftgrößen in% festzulegen.

In diesem Artikel wird beschrieben, wie reaktionsschnelle Schriftgrößen erstellt werden: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

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

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

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

Eine Möglichkeit, das Problem zu lösen, dass der Text sowohl auf dem Desktop als auch auf dem Handy / Tablet gut aussieht, besteht darin, die Textgröße auf physische Einheiten wie physische Zentimeter oder Zoll festzulegen, die nicht vom PPI des Bildschirms abhängen (Punkte pro Zoll).

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

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  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
</script>

Im obigen Code werden den Elementen einer anderen Klasse Schriftgrößen in physischen Einheiten zugewiesen, sofern der Browser / das Betriebssystem für die PPI seines Bildschirms korrekt konfiguriert ist.

Eine Schriftart mit physischen Einheiten ist immer nicht zu groß und nicht zu klein, solange der Abstand zum Bildschirm üblich ist (Abstand zum Lesen von Büchern).

Die Textgröße kann mit einer vwEinheit eingestellt werden, dh der "Breite des Ansichtsfensters". Auf diese Weise folgt die Textgröße der Größe des Browserfensters:

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

Für mein persönliches Projekt habe ich vw und @meida 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;
    }
}

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 denselben Ansatz anwenden.

Der Nachteil bei der vw-Lösung besteht darin, dass Sie kein Skalierungsverhältnis einstellen können. Angenommen, ein 5vw bei einer Bildschirmauflösung von 1440 hat möglicherweise eine Schriftgröße von 60 Pixel, Ihre Ideenschriftgröße. Wenn Sie jedoch die Fensterbreite auf 768 verkleinern, kann dies zu einer Verkleinerung führen 12px, nicht das Minimum, das Sie wollen.

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

Wir können calc () von css verwenden

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

Die mathematische Formel lautet calc (minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth))

Codepen

Ich fürchte, es gibt keine einfache Lösung für die Größenänderung von Schriftarten. Sie können die Schriftgröße mithilfe einer Medienabfrage ändern, die Größe wird jedoch technisch nicht reibungslos geändert. Wenn Sie beispielsweise Folgendes verwenden:

@media only screen and (max-width: 320px){font-size: 3em;}

Sie font-sizesind 3em sowohl für eine Breite von 300 Pixel als auch 200 Pixel. Aber du brauchst niedrigerfont-size Breite von 200 Pixel, um eine perfekte Reaktion zu erzielen.

Was ist die wirkliche Lösung? Es gibt nur einen Weg. Sie müssen ein PNG-Bild (mit transparentem Hintergrund) erstellen, das Ihren Text enthält. Danach können Sie Ihr Bild problemlos ansprechen lassen (z. B. Breite: 35%; Höhe: 28 Pixel). Auf diese Weise reagiert Ihr Text auf allen Geräten vollständig.

Nach vielen Schlussfolgerungen kam ich zu dieser Kombination:

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

    h2 {
        font-size: 4.3vw;
    }
}

Versuche dies

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

habe es von https://css-tricks.com/simplified-fluid-typography/ erhalten

Hier ist etwas, das für mich funktioniert hat. Ich habe es nur auf einem iPhone getestet.

Ob Sie oder Tags haben h1, setzen Sie dies um Ihren Text:h2p

<h1><font size="5">The Text you want to make responsive</font></h1>

Dadurch wird ein 22pt-Text auf einem Desktop gerendert und ist auf dem iPhone weiterhin lesbar.

<font size="5"></font>