Schriftgröße für Handyansicht

Zitat von Frank9652

Code

<p style="text-align: left;"><span style="font-family: caveat; font-size: 20pt;">Text</span></p>

Oder gibt es eine Möglichkeit die Schrift in Handyansicht um einen gewissen Prozentsatz verkleinern zu lassen?
Oder in der Größenangabe auf der HTML-Seite eine altenative Größe für Handys mit anzugeben?

Rem ist eine relative Einheit, die sich auf die Schriftgröße des Wurzelelements (html) bezieht. Das bedeutet, dass du die Schriftgröße aller Elemente auf deiner Webseite anpassen kannst, indem du nur die Schriftgröße des html-Elements änderst. Das ist praktisch, wenn du verschiedene Bildschirmgrößen und Auflösungen berücksichtigen willst. Außerdem respektierst du damit die Benutzereinstellungen für die Schriftgröße im Browser.

Px ist eine absolute Einheit, die eine feste Größe angibt. Das bedeutet, dass du die Schriftgröße jedes Elements einzeln festlegen musst und dass sie sich nicht an die Bildschirmgröße oder die Benutzereinstellungen anpasst. Das kann zu Problemen bei der Lesbarkeit und dem Layout führen.

Es gibt aber auch Nachteile bei der Verwendung von rem. Zum Beispiel kann es schwierig sein, die richtigen Werte zu berechnen, wenn du mehrere verschachtelte Elemente hast. Außerdem kann es sein, dass du einige Elemente in px definieren willst, um ein konsistentes Design zu gewährleisten, wie zum Beispiel Ränder, Abstände oder Container.

Du kannst die Schriftart Caveat mit der CSS-Eigenschaft font-family festlegen. Um die Schriftgröße für verschiedene Bildschirmgrößen anzupassen, kannst du die CSS-Eigenschaft font-size mit relativen Einheiten wie rem oder em verwenden. Dann kannst du Media Queries mit der Media -Regel und den min-width oder max-width Eigenschaften verwenden, um die Schriftgröße je nach Bildschirmbreite zu ändern.

.

/* Definiere eine Klasse namens "caveat" */
.caveat {
  font-family: 'Caveat', cursive;
  font-size: 1rem;
  color: black;
  background: white;
  border: 1px solid black;
}


/* Schriftgröße für Bildschirme ab 600px Breite */
@media screen and (min-width: 600px) {
  .caveat {
   font-size: 1.2rem;
  }
}


/* Schriftgröße für Bildschirme ab 900px Breite */
@media screen and (min-width: 900px) {
  .caveat {
   font-size: 1.5rem;
  }
}

Du hast die Media-Regel verwendet, um die Schriftgröße für verschiedene Bildschirmbreiten anzupassen. Die screen-Eigenschaft bedeutet, dass der Media Query nur für Bildschirme gilt, nicht für andere Medien wie Drucker oder Projektoren. Die min-width-Eigenschaft bedeutet, dass der Media Query nur für Bildschirme gilt, die mindestens eine bestimmte Breite haben. Die p-Eigenschaft bedeutet, dass der Media Query nur für das p-Element gilt, nicht für andere Elemente.

Dein Code bewirkt also folgendes:

• Für alle Bildschirme mit einer Breite von weniger als 600px wird die Schriftgröße des p-Elements auf 1rem gesetzt. Das entspricht der Schriftgröße des html-Elements.
• Für alle Bildschirme mit einer Breite von mindestens 600px und weniger als 900px wird die Schriftgröße des p-Elements auf 1.2rem gesetzt. Das entspricht 120% der Schriftgröße des html-Elements.
• Für alle Bildschirme mit einer Breite von mindestens 900px wird die Schriftgröße des p-Elements auf 1.5rem gesetzt. Das entspricht 150% der Schriftgröße des html-Elements.

/* Verwende die Klasse "caveat" für das p-Element */
<p class="caveat">
  <!-- Verwende das span-Element, um dem Text eine rote Farbe zu geben -->
  <span style="color: red;">Text</span>
</p>

Ich hoffe, das hat dir geholfen

coole Frage mit Pixel und pt und px.

ich habe dies jetzt einfach meiner KI zur Beantwortung gegeben :) sorry - die Tage sind heftig.

8<-

Ein Pixel ist die kleinste Einheit, aus der ein Bildschirm besteht, und ein Punkt ist eine Maßeinheit für die Druckauflösung. Die Umrechnung von pt zu px hängt von der Pixeldichte des Bildschirms ab, die die Anzahl der Pixel pro Zoll (PPI) angibt. Je höher die Pixeldichte, desto mehr Pixel passen in einen Zoll und desto kleiner erscheint die Schrift auf dem Bildschirm.

Um pt in px umzurechnen, kann man folgende Formel verwenden:

px = pt * (96/72)

Das bedeutet, dass 1 pt 1,3333 px entspricht. Umgekehrt kann man px in pt umrechnen, indem man folgende Formel verwendet:

pt = px * (72/96)

Das bedeutet, dass 1 px 0,75 pt entspricht.

Das Samsung Galaxy A53 5G hat eine Displayauflösung von 2400 x 1080 Pixeln und eine Bildschirmdiagonale von 6,5 Zoll2.Um die Pixeldichte zu berechnen, kann man den Pythagoras-Satz verwenden:

PPI = √(2400² + 1080²) / 6,5

Das ergibt eine Pixeldichte von etwa 405 PPI.

Wenn also Ihre Schreibschrift in HTML auf 20 pt eingestellt ist, würde sie auf dem Handy folgende Größe in px haben:

px = 20 * (96/72) = 26,6667

Um die tatsächliche Größe der Schrift auf dem Bildschirm zu bestimmen, muss man die Pixel durch die Pixeldichte teilen:

Größe = px / PPI = 26,6667 / 405 = 0,0658 Zoll

Das entspricht etwa 0,167 cm oder 1,67 mm.

Umgekehrt würde eine Schriftgröße von 30 pt auf dem Handy folgende Größe in px haben:

px = 30 * (96/72) = 40

Und die tatsächliche Größe der Schrift auf dem Bildschirm wäre:

Größe = px / PPI = 40 / 405 = 0,0988 Zoll

Das entspricht etwa 0,251 cm oder 2,51 mm.
8<---

^- das ist mir einfach zu kompliziert. 2,51 mm sind aber arg klein?

Wenn ich für bestimmte Geräte bestimmte Inhalte habe, verwende ich gerne
[size=24]mobiledetectlib[/SIZE]
https://github.com/r23/MyOOS/tree…mobiledetectlib

hier gibt es auch WordPress Plugins...