Frage zu Einheiten (CSS): "vh" / "vw" und "em"

Die Schriftgröße "vw" alleine zu nutzen ist schwierig weil die Schrift dann auf kleinen Bildschirmen nicht mehr lesbar oder auf großen Bildschirmen zu groß dargestellt wird.

• Ich nutze in meinen Widgets oftmals die Schriftgröße clamp().
• zum Beispiel: font-size: clamp(1em, 10vw, 5em);
• Bedeutet: Die Schriftgröße ist 10vw, diese wird nicht kleiner dargestellt als 1em und nicht größer als 5em.

Über 90% der Browser können das lesen für die restlichen sollte noch eine normale Schriftgröße hinzugefügt werden.

Also zum Beispiel:

font-size: 1.1em;
font-size: clamp(1em, 10vw, 5em);

Hallo Mario ,

ich würde deinen Vorschlag gerne für das gesamte Projekt umsetzen, weiß aber nicht wie (bin CSS-Neuling).

Ich habe mithilfe des Handbuchs folgende CSS-Formatierung versucht:

<style>
#content body{
    font-size: 1.1em;
    font-size: clamp(1em, 10vw, 5em);
}
</style>

Das klappt nicht. Was mache ich falsch? Kannst du mir bitte helfen?

Viele Grüße

Pierre

Um die Überschriften H1 bis H4 sowie den Text des gesamten Projektes anzusprechen sollte folgender Code passen. Die Werte musst du natürlich noch anpassen und das ganze dann anschließend mit den verschiedenen Viewports überprüfen.

<style>
h1 {
  font-size: 2.2em;
  font-size: clamp(2.2em, 5.5vw, 5em);
}
h2 {
  font-size: 2.0em;
  font-size: clamp(2.0em, 4.8vw, 4.4em);
}
h3 {
  font-size: 1.6em;
  font-size: clamp(1.6em, 4.4vw, 4em);
}
h4 {
  font-size: 1.4em;
  font-size: clamp(1.4em, 4vw, 3.4em);
}
p {
  font-size: 1em;
  font-size: clamp(1em, 3vw, 2.8em);
}
</style>

Ob das aber in allen Widgets so gut passt bezweifele ich. Deshalb würde ich das so machen.

<style>
.txtclamp h1 {
  font-size: 2.2em;
  font-size: clamp(2.2em, 5.5vw, 5em);
}
.txtclamp h2 {
  font-size: 2.0em;
  font-size: clamp(2.0em, 4.8vw, 4.4em);
}
.txtclamp h3 {
  font-size: 1.6em;
  font-size: clamp(1.6em, 4.4vw, 4em);
}
.txtclamp h4 {
  font-size: 1.4em;
  font-size: clamp(1.4em, 4vw, 3.4em);
}
.txtclamp p {
  font-size: 1em;
  font-size: clamp(1em, 3vw, 2.8em);
}
</style>

Alle Widgets in welchen diese Schriftgrößen übernommen werden sollen erhalten dann die CSS-Klasse: txtclamp

Ein kleiner Hinweis, sollte man vielleicht auch mal kurz lesen:

Nicht em sondern rem für responsive Seiten verwenden!

READ...

Zitat von TomTom

in kleiner Hinweis, sollte man vielleicht auch mal kurz lesen:

Nicht em sondern rem für responsive Seiten verwenden!

Das halte ich für eine sehr verkürzte Darstellung der Situation. Beide eignen sich generell für responsive Seiten. Nur ist einer relativ zum parent und einer ist relativ zum root.

https://www.sitepoint.com/understanding-…its-vs-em-units

Zitat von TomTom

[snip

Nicht em sondern rem für responsive Seiten verwenden!

[snip]

Dieser Hinweis ist nicht richtig! Steht auch nirgends im verlinkten Artikel, dass "em" bei responsiven Sites NICHT verwendet werden kann. Allerdings könnte dieser Artikel zu diesem Fazit verleiten, das ist schon so ...

Beide - "em" sowie auch "rem" - sind grundsätzlich für responsive Seiten verwendbar.

Wenn schon nur das Eine, dann würde ICH eher "em" bevorzugen ... weil, siehe hier:

Gruss

Hallo erstmal...

Der Kommentar von mir "Nicht em sondern rem für responsive Seiten verwenden!" sollte auch nicht heißen das das der einzig richtige Weg sei.

Ich wollte nur diesen Artikel beisteuern, da ich mir bis vor vier Wochen noch nie gedanken gemacht habe ob px, em oder rem sinnvoller wären.

Ich hatte das Thema bedingt durch einen Kunden auch gerade auf dem Tisch liegen und hatte eben unter anderem diesen Artikel gefunden.

Ich hätte hinter den zitierten Satz besser ein "?" machen sollen.

Aber ich finde es mal wieder echt klasse, das einem hier wirklich weitergeholfen wird und es super fachliche Diskussionen gibt.
Danke vor allem Stefan S. für den intressanten Link. Sehr guter Artikel.

Ich habe meist in der Vergangenheit alles in px angegeben, das werde ich nun für mich mal grundsätzlich überdenken.

Nach allem was ich bisher dazu gelesen habe, sind die Formate em und rem wohl deutlich geeigneter für das Webdesign.

Ich bin mir nur noch nicht ganz klar welches ich demnächst hauptsächlich verwenden werde.

Im Moment tendiere ich mehr zu "rem", da ich glaube das es für mich einfacher ist den Zusammenhang der Schriftgröße mit dem root (dem obersten, ersten Container)

zu verstehen und mir während der Webseitenerstellung vorstellen zu können, als durch "em", da dieser sich ja immer nur auf den darüberliegenden container bezieht.

Mich würde mal intressieren wie ihr euch da entschieden habt.

(nochmal dazu ein Link: LINK)

VG Thomas

Hallo Mario,

vielen Dank für die schnelle und hilfreiche Antwort!

Ich habe mich jetzt an die Umsetzung wie folgt gemacht:

- CSS-Klasse definiert (sonst kam es - wie du erwartet hast - zu Problemen mit einigen Widgets)
- ul { ... } hinzugefügt, damit es auch bei Aufzählungen klappt

- CSS-Klasse den Widgets hinzugefügt

Das klappt fast überall. Probleme bereitet mir noch folgendes:

- Widget Tabellarische Daten (hier passiert nichts)

- Wildget Bild: Die Bildunterschriften wollen nicht (nicht so wichtig, konnte es befriedigend mit html lösen)

- Shop: Beschreibungstexte von Shop, Kategorien und Artikel klappt, Rest nicht (Artikel-Titel, Preis, Titel & Texte der Varianten)

- Hauptmenu (nicht so wichtig aber wäre das hier auch möglich?)

Habe die Umsetzung noch nicht live, weil ich gerne vorher die anderen Punkte ändern würde.

Viele Grüße

Pierre

Du kannst die entsprechenden Klassen über die Browser-Entwicklerkonsole herausfinden.

Zum Beispiel in Chrome das Element markieren > Rechtsklick > untersuchen > ...

Dort solltest du zB. folgendes finden.

• Artikel-Titel: .zpshoparticle .zpProduct h1, .zpshoparticle .zpProduct h2
• Preis: .zpshoparticle .zpProduct .price
• inkl. USt. zzgl. Versandkosten: .zpshoparticle .zpProduct .pricelabel
• Beschreibungstext: .zpshoparticle .zpProduct .productdescription
• Tabellarische Daten: table.zptabledata th, table.zptabledata td, table.zpfixed-column th, table.zpfixed-column td

Wenn einmal ein CSS nicht greift kann eventuell ein !important helfen.

Du solltest aber bei solchen Eingriffen genau wissen was du tust!

Okay, damit bin ich nochmal ein gutes Stück voran gekommen, vielen Dank Mario !