• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

schrift dynamisch

MaJo1419

Neues Mitglied
Hallo zusammen,

ich habe begonnen mit html und CSS nun habe ich folgendes Problem:confused:

Ich möchte eine Seite erstellen die ich mit dem Grid Raster anlege, und in jedes Feld wird über eine MySQL Datenbank ein Wert geschrieben.
Wie kann ich innerhalb des Grid (Feld) die Schriftart dynamisch machen damit sich es dem Feld anpasst?

Mein Code




<!DOCTYPE html>
<html>
<head>
<style>

html, body, .grid-container {
height: 100%;
width: 100%;
margin: 0;
text-align: center;
font-size: 15px;
font-family: Verdana, sans-serif;



}

.grid-container {
display: grid;

grid-template-columns: 18.8% 18.8% 18.8% 18.8% 18.8% ;
grid-template-rows: 5% 16% 5% 16% 5% 16% 5% 16%;
grid-gap: 1% 1%;
background-color: #FFFFFF;
padding: 10px;
}

/* globaler item style */

.grid-container > div {
padding: 0px 0;


}

/* style Produktüberschriften */

.produkt{
background-color: #3DCF19;
text-align: center;
font-size: 40px;
}

.anzahl{
background-color: #FB00CC;
text-align: center;
font-size: 150px;
color: #FFFFFF;
border: 5px solid black;
border-radius:50px;

}
</style>
</head>
<body>



<h1>POSTENANSICHT</h1>



<div class="grid-container">
<div class="produkt">PRODUKT 1</div>
<div class="produkt">PRODUKT 2</div>
<div class="produkt">PRODUKT 3</div>
<div class="produkt">PRODUKT 4</div>
<div class="produkt">PRODUKT 5</div>
<div class="anzahl">345</div>
<div class="anzahl">7</div>
<div class="anzahl">8</div>
<div class="anzahl">9</div>
<div class="anzahl">10</div>
<div class="produkt">PRODUKT 6</div>
<div class="produkt">PRODUKT 7</div>
<div class="produkt">PRODUKT 8</div>
<div class="produkt">PRODUKT 9</div>
<div class="produkt">PRODUKT 10</div>
<div class="anzahl">165</div>
<div class="anzahl">17</div>
<div class="anzahl">18</div>
<div class="anzahl">19</div>
<div class="anzahl">20</div>
<div class="produkt">PRODUKT 11</div>
<div class="produkt">PRODUKT 12</div>
<div class="produkt">PRODUKT 13</div>
<div class="produkt">PRODUKT 14</div>
<div class="produkt">PRODUKT 15</div>
<div class="anzahl">6</div>
<div class="anzahl">7</div>
<div class="anzahl">8</div>
<div class="anzahl">9</div>
<div class="anzahl">10</div>
<div class="produkt">PRODUKT 16</div>
<div class="produkt">PRODUKT 17</div>
<div class="produkt">PRODUKT 18</div>
<div class="produkt">PRODUKT 19</div>
<div class="produkt">PRODUKT 20</div>
<div class="anzahl">16</div>
<div class="anzahl">17</div>
<div class="anzahl">18</div>
<div class="anzahl">19</div>
<div class="anzahl">20</div>
</div>

</body>
</html>
 
Werbung:
Die Schriftgrößen an umgebende Elemente anzupassen hat sich nicht bewährt (um es mal freundlich auszudrücken).

Wenn du es trotzdem machen willst solltest du dich mit den Einheiten vw und vh beschäftigen. Sinnvoller wird sein die Schriftgröße mittels Media Queries stufenweise anzupassen.

Ohne korrekten HTML-Quelltext (wie dein aktueller) wirst du aber nicht weit kommen.
 
Zuletzt bearbeitet:
Zurück
Oben