it-swarm.com.de

Responsive Schriftgröße in CSS

Ich habe eine Site mit dem Raster Zurb Foundation 3 erstellt. Jede Seite hat einen großen 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 Mobilgeräte ändere, wird die große Schrift nicht angepasst und der Browser enthält eine horizontale Bildlaufleiste, um den großen Text aufzunehmen.

Mir ist aufgefallen, dass bei der Zurb Foundation 3 Typografie Beispielseite die Header an den Browser angepasst werden, da dieser komprimiert ist und erweitert.

Vermisse ich etwas wirklich Offensichtliches? Wie erreiche ich das?

319
user2213682

Der font-size reagiert nicht so, wenn die Größe des Browserfensters geändert wird. Stattdessen reagieren sie auf die Zoom-/Schriftgrößeneinstellungen des Browsers, z. B. wenn Sie drücken ctrl und + zusammen auf der Tastatur im Browser.

Medienabfragen

Sie müssten nachsehen, wie Sie 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 unten in Ihr CSS einzufügen und die 320px-Breite für alle Bereiche zu ändern, in denen Ihr Design beschädigt wird:

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

   body { 
      font-size: 2em; 
   }

}

Ansichtsfenster in Prozent

Sie können auch prozentuale Länge des Ansichtsfensters wie vw, vh, vmin und vmax verwenden. Das offizielle W3C-Dokument für diese Staaten:

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

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

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

vh unit - Entspricht 1% der Höhe des anfänglichen Blockes.

vmin unit - Entspricht dem kleineren von vw oder vh.

vmax unit - Entspricht dem größeren 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 man sehen kann hier . Einige Versionen von IE und Edge unterstützen jedoch vmax nicht. IOS 6 und 7 haben außerdem ein Problem mit der vh-Einheit, das in iOS 8 behoben wurde.

270

Sie können den Wert des Ansichtsfensters anstelle von ems, pxs oder pts verwenden.

1vw = 1% der Ansichtsfensterbreite

1vh = 1% der Höhe des Ansichtsfensters

1 Vmin = 1 Vw oder 1 Vh, je nachdem, welcher Wert kleiner ist

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

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

aus Css-Tricks: http://css-tricks.com/viewport-sized-typography/

607
SolidSnake

Verwenden Sie CSS media -Spezifizierer (das ist, was sie [zurb] verwenden) für das responsive Styling:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}
35
Albert Xing

Ich habe versucht, dieses Problem zu lösen, und glaube, ich habe eine Lösung gefunden:

Wenn Sie Ihre App für IE9 + und alle anderen modernen Browser schreiben können, die CSS-Einheiten calc (), rem und vmin unterstützen, können Sie damit skalierbaren Text ohne Medienabfragen erstellen:

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

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

33
csuwldcat

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

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

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

29
Javi Stolz

Es gibt verschiedene Möglichkeiten, dies zu erreichen

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

body
{
       font-size: 22px; 
}
h1
{
       font-size:44px;
}

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

Verwenden Sie Dimensionen in % oder em . Ändern Sie einfach die Grundschriftgröße, alles ändert sich. Anders als bei der vorherigen Version können Sie die Hauptschriftart und nicht jedes Mal h1 ändern oder die Basisschriftgröße auf die Standardschriftart des Geräts zurücksetzen und alles in em ruhen lassen

  1. "Ems" (em) : Das "em" ist eine skalierbare Einheit. Ein em entspricht der aktuellen Schriftgröße. Wenn beispielsweise die Schriftgröße des Dokuments 12pt beträgt, entspricht 1em 12pt. Ems sind in der Natur skalierbar, also würde 2em 24pt entsprechen, .5em würde 6pt entsprechen, etc ..
  2. Prozent (%) : Die prozentuale Einheit ähnelt der "em" -Einheit, abgesehen von einigen grundlegenden Unterschieden. In erster Linie ist die aktuelle Schriftgröße gleich 100% (d. H. 12pt = 100%). Bei Verwendung der prozentualen Einheit bleibt Ihr Text für mobile Geräte und für die Barrierefreiheit vollständig skalierbar.

siehe kyleschaeffer.com/....

CSS3 unterstützt neue Dimensionen, die relativ zum Ansichtsfenster sind. Dies funktioniert jedoch nicht in Android

  1. 3,2 vw = 3,2% der Breite des Ansichtsfensters
  2. 3,2 vh = 3,2% der Höhe des Ansichtsfensters
  3. 3,2 vmin = kleiner von 3,2 vw oder 3,2 vh
  4. 3,2 vmax = Größer von 3,2 vw oder 3,2 vh

    body
    {
        font-size: 3.2vw;
    }
    

siehe css-tricks.com/.... und auch caniuse.com/....

14
aWebDeveloper

"vw" -Lösung hat ein Problem beim Aufrufen sehr kleiner Bildschirme. Sie können die Basisgröße festlegen und von dort mit calc () nach oben gehen:

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

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 IE7-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

10
Yuri P.

Dies ist teilweise in Stiftung 5 umgesetzt.

in _type.scss gibt es zwei Gruppen 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 mittelgroße Unternehmen werden Größen basierend auf dem ersten Satz von Variablen generiert.

@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 Standard-d. H. 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

8
Sudheer

Responsive Schriftgröße kann auch mit diesem Javascript namens FlowType erfolgen:

FlowType - Responsive Web-Typografie vom Feinsten: Schriftgröße basierend auf der Elementbreite.

Oder dieses Javascript namens FitText :

FitText - macht Schriftgrößen flexibel. Verwenden Sie dieses Plugin für Ihr responsives Design, um die Größe Ihrer Überschriften auf Verhältnisbasis zu ändern.

6
phlegx

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 auf einfache Weise wie folgt 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);
}
5
Dannie Vinther

jQuery "FitText" ist wahrscheinlich die am besten ansprechende Header-Lösung. Schau es dir bei Github an: https://github.com/davatron5000/FitText.js

3
Raghav Kukreti

In der Originalversion von sass not scss können Sie die folgenden Mixins verwenden, um die Schriftgröße von Absätzen und Überschriften automatisch festzulegen.

Ich mag es, weil es viel kompakter ist. Und schneller zu tippen. Ansonsten bietet es die gleiche Funktionalität. Wie auch immer, wenn Sie immer noch an der neuen Syntax festhalten möchten - scss - können Sie mein sass hier in scss umwandeln: [CONVERT SASS TO SCSS HERE]

Im Folgenden gebe ich Ihnen vier Sass Mixins. Sie müssen die Einstellungen an Ihre Bedürfnisse anpassen.

=font-h1p-style-generator-manual() // you dont need use this one those are only styles to make it pretty
=media-query-base-font-size-change-generator-manual() // this mixin sets base body size that will be used by h1-h6 tags to recalculate their size in 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

Wenn Sie mit den Einstellungen fertig sind, rufen Sie einfach einen Mixin auf. Dies ist: + config-and-run-font-generator () . Siehe Code unten und Kommentare für weitere Informationen.

Ich denke, Sie können dies automatisch für Medienabfragen tun, wie dies auch für Header-Tags der Fall ist, aber wir verwenden alle unterschiedliche Medienabfragen, sodass dies nicht für alle geeignet wäre. Ich benutze den Ansatz von Mobile First Design, also würde ich das so machen. Fühlen Sie sich frei, diesen Code zu kopieren und zu verwenden.

KOPIEREN SIE UND FÜGEN SIE DIESE MISCHUNGEN IN IHRE DATEI EIN

=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 place holder 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 MIXINS NACH IHREN BEDÜRFNISSEN - SPIELEN SIE MIT! :) UND NENNEN SIE ES OBEN AUF IHREM AKTUELLEN SASS CODE MIT:

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

Dies würde diese Ausgabe erzeugen. Sie können Parameter anpassen, um unterschiedliche Ergebnismengen zu generieren. Da wir jedoch alle unterschiedliche Medienabfragen verwenden, müssen einige Mixins manuell bearbeitet werden (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; 

}
2
DevWL

Wie bei vielen Frameworks brechen die Dinge von links nach rechts ab, 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 Standardgitterklassen verwenden, sollte die Webseite auf Mobilgeräten ordnungsgemäß angezeigt werden (d. H. Reaktionsfähig).

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 jQuery-Plugin wie FlowType und FitText . Wenn du etwas Leichtes willst, kannst du mein Scalable Text jQuery-Plugin ausprobieren:

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

Beispielnutzung:

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

Habe diese Lösung gefunden, arbeite 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)));
}
1
Buzz

Sie können dies auf folgende Arten erreichen:

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

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

1

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 Bildschirm abhängig sind PPI (Punkte pro Zoll).

Basierend auf diese Antwort , unten ist der Code, den ich am Ende des HTML-Dokuments für die 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 verschiedener Klassen Schriftgrößen in physischen Einheiten zugewiesen, sofern das Browser/Betriebssystem für das PPI seines Bildschirms korrekt konfiguriert ist. Eine physikalische Einheitsschrift ist immer nicht zu groß und nicht zu klein, solange der Abstand zum Bildschirm normal ist (Leseabstand).

1
Serge Rogatch
 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; }
1
King Rayhan

Ich weiß, das ist eine alte Frage, ich hatte die gleiche Frage und nach dem googeln sah ich einen tollen Artikel von CSS-Tricks . Es funktioniert gut. Hoffe es hilft:

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 Eigenschaft line-height anwenden, um sie auch im Browser zu ändern.

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

Ich hatte gerade eine Idee, bei der man die Schriftgröße nur einmal pro Element festlegen muss, sie aber immer noch von Medienabfragen beeinflusst wird.

Zuerst setze ich die Variable "--text-scale-unit" mit Hilfe der Media-Abfragen auf "1vh" oder "1vw", je nach Ansichtsfenster.

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

/* Define variable based on the orientation. */
/* 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 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.

Wie findest du diese Idee?

1

Die Textgröße kann mit einer vw -Einheit festgelegt werden, was die "Ansichtsfensterbreite" bedeutet. 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;
    }
  }
1
user10154568

Sie können die Schriftgröße ansprechend gestalten, indem Sie sie in vw (Ansichtsfensterbreite) definieren. Es werden jedoch nicht alle Browser unterstützt. Die Lösung besteht darin, JS zu verwenden, um die Basisschriftgröße in Abhängigkeit von der Breite des Browsers zu ändern und alle Schriftgrößen in% festzulegen. In diesem Artikel wird beschrieben, wie ansprechende Schriftgrößen erstellt werden: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

1

Ich benutze diese CSS-Klassen, mache 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);
}
1
Buzz

Ich fürchte, es gibt keine einfache Lösung für das Ändern der Schriftgröße. Sie können die Schriftgröße mithilfe der Medienabfrage ändern, die Größe wird jedoch technisch nicht reibungslos geändert. Wenn Sie zum Beispiel Folgendes verwenden:

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

Ihre Schriftgröße beträgt 3em für 300px und 200px Breite. Sie benötigen jedoch eine geringere Schriftgröße für eine Breite von 200 Pixel, um ein perfektes Reaktionsverhalten zu erzielen.

Also, 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 einfach reaktionsschnell machen (Beispiel: Breite: 35%; Höhe: 28 Pixel). Auf diese Weise reagiert Ihr Text auf allen Geräten vollständig.

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

verwenden Sie diese Gleichung.

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 der vw-Lösung besteht darin, dass Sie kein Skalierungsverhältnis festlegen können. Bei einer Bildschirmauflösung von 1440 kann beispielsweise eine 5vw-Schriftgröße von 60px, die Schriftgröße Ihrer Idee, erreicht werden 12px, nicht das Minimum, das Sie wollen. Mit dieser Methode können Sie die Ober- und Untergrenze festlegen, und die Schriftart wird dazwischen skaliert.

0
Shuwei

Nach vielen Schlussfolgerungen bin ich zu dieser Kombination gekommen

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

 h2{
        font-size: 4.3vw;
    }

}
0
Harsh Gupta