Wie kann ich die Schriftgröße im Responsive Webdesign proportional zur Containergröße skalieren?

Ändern der Schriftgröße proportional zur DIV-Größe

Beim Erstellen eines Weblayouts, das sich an verschiedene Bildschirmgrößen anpassen soll, ist es wichtig sicherzustellen, dass die Der Text bleibt bei allen Auflösungen lesbar. Ein häufiges Problem besteht darin, dass sich die Textgröße möglicherweise nicht proportional zu den Abmessungen des Containers ändert.

Frage:

1. So ändern Sie die Textgröße dynamisch, um ein konsistentes Verhältnis zum Container beizubehalten Container?
2. Ist die Verwendung mehrerer @media-Abfragen und maßgeschneiderter Layouts für verschiedene Bildschirmgrößen ein praktikabler Ansatz?

Lösung:

Diese Lösung nutzt ausschließlich CSS3, sodass kein JavaScript erforderlich ist:

Reiner CSS3-Ansatz:

@media all and (min-width: 50px)   {  body  { font-size:0.1em;  } }
@media all and (min-width: 100px)  {  body  { font-size:0.2em;  } }
@media all and (min-width: 200px)  {  body  { font-size:0.4em;  } }
@media all and (min-width: 300px)  {  body  { font-size:0.6em;  } }
@media all and (min-width: 400px)  {  body  { font-size:0.8em;  } }
@media all and (min-width: 500px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 600px)  {  body  { font-size:1.2em;  } }
@media all and (min-width: 700px)  {  body  { font-size:1.4em;  } }
@media all and (min-width: 800px)  {  body  { font-size:1.6em;  } }
@media all and (min-width: 900px)  {  body  { font-size:1.8em;  } }
@media all and (min-width: 1000px) {  body  { font-size:2.0em;  } }
@media all and (min-width: 1100px) {  body  { font-size:2.2em;  } }
@media all and (min-width: 1200px) {  body  { font-size:2.4em;  } }
@media all and (min-width: 1300px) {  body  { font-size:2.6em;  } }
@media all and (min-width: 1400px) {  body  { font-size:2.8em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.0em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.2em;  } }
@media all and (min-width: 1600px) {  body  { font-size:3.4em;  } }
@media all and (min-width: 1700px) {  body  { font-size:3.6em;  } }

Erklärung:

Diese Medienabfragen passen die Schriftgröße basierend auf der verfügbaren Bildschirmbreite dynamisch in Schritten von 100 Pixel an und stellen so eine Schriftgröße sicher, die lesbar und optisch angemessen bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich die Schriftgröße im Responsive Webdesign proportional zur Containergröße skalieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!