it-swarm.com.de

So implementieren Sie die flüssige Schriftgröße mit reinem CSS

Ich habe Text in <div>s verpackt und möchte das Ganze flüssig machen, einschließlich der Schriftgröße des Textes, d. H. Der Text ändert sich selbst als Reaktion auf die Größe des enthaltenden Elements.

Ich bin auf eine Javasript + CSS-Lösung gestoßen , aber frage mich nur, ob dies mit reinem CSS möglich ist?

16
skyork

Ja, schauen Sie sich CSS-3-Medienabfragen an. Sie können je nach Breite des Ansichtsfensters unterschiedliche Stilregeln angeben. Dies beinhaltet das Ändern der Schriftgröße.

6
Jim

Während Jim Ihnen genaue Informationen gegeben hat, weicht dies von der leicht gestellten Frage ab. Responsive Design (@media-Abfragen) können den Text entsprechend der Bildschirmgröße ändern. Soweit ich weiß, haben Sie gefragt, ob es eine reine CSS-Lösung für Fließtextgröße gibt (fortlaufende Größenanpassung von Text während der Änderung der Fenstergröße). 

Hier ist ein Link zu den CSS-Tricks, die neue Schriftgrößen-Techniken erläutern. Bitte beachten Sie, dass dies neu ist und ältere Browser höchstwahrscheinlich Probleme haben werden und auch neuere (Chrome + Safari) immer noch nicht fehlerfrei sind.

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

Editierter Code

32
Brett Santore

Kurze Antwort

Sie können keine fließenden Schriftgrößen haben, aber Sie werden verfügbar sein, wenn Viewport-Prozentlängen weit verbreitet sind.

Lange Antwort

Sie müssen diese beiden Begriffe verstehen: responsive und fluid .

Responsive bedeutet, dass Ihr Stylesheet auf verschiedene Fenstergrößen unterschiedlich reagiert. Dies geschieht mit CSS Media Queries . Responsive ist zwar eines der hippesten Wörter im Webdesign, es bedeutet jedoch meistens, hartes CSS für unterschiedliche Längen zu codieren, bis Sie vor Langeweile tot sind.

Fluid bedeutet, dass Sie mit relativen Längeneinheiten wie Prozentsätzen arbeiten. Wenn Sie mit relativen Längeneinheiten arbeiten, wird jede Größe automatisch berechnet.

Beispiel

Nehmen wir an, Sie haben einen <div> im Dokumentkörper, und Sie möchten, dass er die Hälfte des Fensters ausfüllt.

Die responsive Lösung lautet:

@media (max-width: 1px) {
  body > div {
    width: 0.5px;
  }
}

@media (max-width: 2px) {
  body > div {
    width: 1px;
  }
}

@media (max-width: 3px) {
  body > div {
    width: 1.5px;
  }
}

@media (max-width: 4px) {
  body > div {
    width: 2px;
  }
}

/* Repeat until you reach gigabytes and hit operating systems' file size limitations. */

Und die Flüssigkeit Lösung:

body > div {
  width: 50%;
}

So?

Was uns heute einschränkt, ist, dass es für Viewport-relative Längeneinheiten keine breite Unterstützung gibt. Was Sie tun können, ist die ganze Idee von "pure CSS fluid font size" und go responsive .

2
AlicanC

verwenden Sie calc mit Medienabfrage für eine fließende Schriftart

@media screen and (min-width: 25em){
  div {  
    font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
  }
}
0
static_null