Philip: /* Gut lesbarer Absatz */

2025-03-15T18:37:58Z

Gut lesbarer Absatz

← Nächstältere Version		Version vom 15. März 2025, 21:37 Uhr
Zeile 96:		Zeile 96:
	Ergebnis der Lesbarkeitseinstellung:		Ergebnis der Lesbarkeitseinstellung:
	{{Iframe		{{Iframe
	\|url = https://codeeditor.ru/code.php?id=2502KSM7stvi1Y		\|url = https://codeeditor.ru/code.php?id=2502KSM7stvi1Y&lang=de
	\|höhe = 500px		\|höhe = 500px
	\|titel = CSS Anpassbarer Text		\|titel = CSS Anpassbarer Text

Philip: Die Seite wurde neu angelegt: „'''CSS Anpassbarer Text''' ist ein Ansatz zur Gestaltung von Textinhalten, der eine optimale Anzeige des Textes auf verschiedenen Geräten und Bildschirmen gewährleistet. Diese Technologie ist ein wesentlicher Bestandteil des responsiven Webdesigns. == Wichtige Maßeinheiten == === Relative Einheiten === * '''`em`''' – eine relative Einheit, abhängig von der Schriftgröße des übergeordneten Elements * '''`rem`''' – eine re…“

2025-03-15T18:37:28Z

Die Seite wurde neu angelegt: „'''CSS Anpassbarer Text''' ist ein Ansatz zur Gestaltung von Textinhalten, der eine optimale Anzeige des Textes auf verschiedenen Geräten und Bildschirmen gewährleistet. Diese Technologie ist ein wesentlicher Bestandteil des responsiven Webdesigns. == Wichtige Maßeinheiten == === Relative Einheiten === * '''<code>em</code>''' – eine relative Einheit, abhängig von der Schriftgröße des übergeordneten Elements * '''<code>rem</code>''' – eine re…“

Neue Seite

'''CSS Anpassbarer Text''' ist ein Ansatz zur Gestaltung von Textinhalten, der eine optimale Anzeige des Textes auf verschiedenen Geräten und Bildschirmen gewährleistet. Diese Technologie ist ein wesentlicher Bestandteil des responsiven Webdesigns.

== Wichtige Maßeinheiten ==

=== Relative Einheiten ===

* '''<code>em</code>''' – eine relative Einheit, abhängig von der Schriftgröße des übergeordneten Elements
* '''<code>rem</code>''' – eine relative Einheit, abhängig von der Schriftgröße des Wurzelelements (root em)
* '''<code>vw</code>''' – eine Einheit, die 1% der Viewport-Breite entspricht
* '''<code>vh</code>''' – eine Einheit, die 1% der Viewport-Höhe entspricht
* '''<code>vmin</code>''' – der kleinere Wert zwischen vw und vh
* '''<code>vmax</code>''' – der größere Wert zwischen vw und vh

=== Absolute Einheiten ===

* '''<code>px</code>''' – Pixel
* '''<code>pt</code>''' – Punkt
* '''<code>pc</code>''' – Pica

=== Eigenschaften ===
* <code>font-size</code> — Schriftgröße.
* <code>line-height</code> — Zeilenhöhe.
* <code>font-weight</code> — Schriftstärke.
* <code>text-align</code> — Textausrichtung.
* <code>word-wrap</code> und <code>overflow-wrap</code> — Steuerung des Wortumbruchs.

== Anpassungstechniken ==

=== Flüssige Typografie (Fluid Typography) ===
Fluid Typography ermöglicht eine fließende Skalierung des Textes abhängig von der Bildschirmgröße:<syntaxhighlight lang="css">
.fluid-text {
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}
</syntaxhighlight>

=== Media Queries ===
Media Queries ermöglichen verschiedene Stile für unterschiedliche Bildschirmgrößen:<syntaxhighlight lang="css">
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}

@media screen and (min-width: 769px) {
body {
font-size: 18px;
}
}
</syntaxhighlight>

== Die Funktion calc() ==
Die <code>calc()</code>-Funktion ermöglicht die Kombination verschiedener Maßeinheiten:<syntaxhighlight lang="css">
.adaptive-heading {
font-size: calc(16px + 2vw);
line-height: calc(1.1em + 0.5vw);
}
</syntaxhighlight>

== Moderne CSS-Funktionen ==

=== clamp() ===
Die <code>clamp()</code>-Funktion setzt minimale, bevorzugte und maximale Werte:<syntaxhighlight lang="css">
.heading {
font-size: clamp(1.5rem, 5vw, 3rem);
}
</syntaxhighlight>

=== min() und max() ===
Die <code>min()</code>- und <code>max()</code>-Funktionen helfen, dynamische Begrenzungen festzulegen:<syntaxhighlight lang="css">
.paragraph {
width: min(65ch, 100%);
font-size: max(1rem, 2vw);
}
</syntaxhighlight>

== Anwendungsbeispiele ==

=== Anpassbare Überschrift ===
<syntaxhighlight lang="css">
h1 {
font-size: clamp(2rem, 5vw + 1rem, 4rem);
line-height: 1.2;
margin-bottom: calc(1rem + 2vw);
}
</syntaxhighlight>

=== Gut lesbarer Absatz ===
<syntaxhighlight lang="css">
p {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
line-height: 1.6;
max-width: 65ch;
margin: 0 auto;
}
</syntaxhighlight>
Ergebnis der Lesbarkeitseinstellung:
{{Iframe
|url = https://codeeditor.ru/code.php?id=2502KSM7stvi1Y
|höhe = 500px
|titel = CSS Anpassbarer Text
}}

== Praktische Tipps ==

* Verwenden Sie relative Maßeinheiten anstelle von absoluten
* Kombinieren Sie verschiedene Techniken für optimale Ergebnisse
* Testen Sie das Layout auf verschiedenen Geräten
* Berücksichtigen Sie die Lesbarkeit des Textes
* Definieren Sie Mindest- und Höchstwerte, um extreme Größen zu vermeiden

== Browserunterstützung ==
{| class="wikitable"
!Funktion
!Chrome
!Firefox
!Safari
!Edge
|-
|clamp()
|79+
|75+
|13.1+
|79+
|-
|calc()
|19+
|4+
|6+
|12+
|-
|vw/vh
|20+
|19+
|6+
|12+
|}

CSS Anpassbarer Text - Versionsgeschichte

Philip: /* Gut lesbarer Absatz */