Wie kann ich die Schriftgröße dynamisch basierend auf der Div-Größe ändern?

Schriftgröße entsprechend Div-Größe ändern

In einem Szenario, in dem ein Div aus neun Feldern besteht, wobei der Text im mittleren Feld enthalten ist ist es wünschenswert, die Schriftgröße dynamisch anzupassen, um ein konsistentes Verhältnis zu den gesamten Seitenabmessungen beizubehalten.

Ändern der Textgröße innerhalb der Div

Um dies zu erreichen, integrieren Sie die folgenden CSS3-Eigenschaften in den tag:

body {
  font-size: calc(1.25vmin + 1.25vmax);
}

Auflösungsübergreifende Kompatibilität

Anstatt mehrere CSS-Medienabfragen zu verwenden, um unterschiedliche Auflösungen zu berücksichtigen, sollten Sie die folgenden CSS3-Stile verwenden, die die Schriftart automatisch anpassen Größe basierend auf dem Bildschirm Breite:

@media (min-width: 50px) { body { font-size: 0.1em; } }
@media (min-width: 100px) { body { font-size: 0.2em; } }
// ...and so on, with incrementing width thresholds...
@media (min-width: 1700px) { body { font-size: 3.6em; } }

Erklärung

• Die vmin-Einheit stellt den minimalen Prozentsatz der Höhe oder Breite des Ansichtsfensters dar.
• Der vmax Die Einheit stellt den maximalen Prozentsatz der Höhe oder Breite des Ansichtsfensters dar.
• Mit dieser Formel wird die Schriftgröße proportional kleiner skaliert der Höhe und Breite des Ansichtsfensters, um konsistente Textproportionen über verschiedene Bildschirmgrößen hinweg sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Schriftgröße dynamisch basierend auf der Div-Größe ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!