schrift dynamisch

MaJo1419 · 14 April 2021

Hallo zusammen,

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

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>

MrMurphy · 14 April 2021

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.

schrift dynamisch

MaJo1419

Neues Mitglied

MrMurphy

Senior HTML'ler

Neueste Beiträge