Text Größe font-size auto

Christian24

Hallo liebe Community,

ich hoffe ihr könnt mir bei meinem Problem helfend

Auf meiner Page habe ich mit großer Schrift "Willkommen" geschrieben.
Auf dem PC stimmt die Schriftgröße

Wenn ich jetzt aufs Tablet oder Telefon die Seite öffne wird mit die Schrift 2-zeilig angezeigt.

Gibt es eine Möglichkeit von Autoscale der Schrift - D.h. Wenn das IE-Fenster verkleinere dass er mir auch die Schrift automatisch verkleinert.

Danke für die Hilfe
Christian

MrMurphy

Hallo

Grundsätzlich solltest du HTML5 und CSS3 verwenden.

Dann sollte der viewport für hochauflösende Displays vorgegeben werden, zum Beispiel

Code

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dazu gehört unter anderem auf Inline-CSS, veraltete HTML-Attribute und unnötige Elemente zu verzichten. Also

Code

<h1><Willkommen</h1>

Das Styling wird dann per CSS erledigt. Du lieferst leider zu wenig Informationen um dir eine konkrete Lösung bieten zu können. Am besten wäre ein Link zu der Seite.

Wenn die Seite besucherfreundlich daherkommen soll, sollte die Schrift mindestens 20px groß sein. 16px ist zwar die übliche von den Browsern vorgegebene Größe, wird aber von vielen Besuchern als zu klein empfunden. Dies gilt speziell auch für Smartphones und Tablets die häufig zum Lesen nicht stabil justiert werden können, zum Beispiel in Bus und Bahn oder im Auto.

Die Wortbreite kann durch verschiedene Maßnahmen beeinflußt werden, wobei auch Responsive Design mit Media Queries verwendet werden sollte. Beispielsweise

Anpassen der Außenabstände (padding, border, margin)
durch Anpassung der Buchstabenabstände
Ändern der Schriftart
Stufenweises Ändern der Schriftgröße
Flexibles Ändern der Schriftgröße

Was davon am sinnvollsten ist hängt von deiner restlichen Webseite ab.

Gruss

MrMurphy

Christian24

Hallo MrMurphy,

danke für die schnelle Antwort.

Ich verwende Wordpress mit der Vorlage: TwentyTwelve und bei der Erstellung habe ich mit den WYSIWYG-Editor gearbeitet daher diese Darstellung.
Homepage ist leider noch nicht online, daher ist ein Link nicht möglich.

Wie würde in diesem Fall die CSS für h1 ausschauen?

Schöne Grüße
Christian

MrMurphy

Hallo

Zitat

Wie würde in diesem Fall die CSS für h1 ausschauen?

Um deine Darstellung mit dem HTML

Code

<h1>Willkommen</h1>

zu erreichen würde das CSS folgendermaßen aussehen:

Code

color: #008000;
font-size: 1rem;
text-align: center;
font-weight: 800;
letter-spacing: 0.35rem;

Über Media Queries kannst du den Buchstabenabstand bei schmalen Fentergrößen zurücksetzen. Für weniger als 500px Fensterbreite könnte das dann so aussehen:

Code

@media only screen and (max-width: 500px) {
      h1 {
         letter-spacing: 0;
      }
   }

Zitat

Ich verwende Wordpress

Mit Wordpress kenne ich mich leider nicht aus. Weißt du denn überhaupt wie du dort individuelles CSS mit Media Queries einfügen kannst?

Gruss

MrMurphy

Arne Drews

Hallo,

Ich kenne den aktuellen WP-Stand nicht im Detail, aber es war zumindest mal so, dass der WYSIWYG-Editor von WP tlw. per InlineCSS gestylt hat.
Die Frage wäre dann, in wie weit Du Dich auskennst, diesen generierten Code anzupassen oder evtl. auf WP zu verzichten?

Christian24

Die CSS passe ich immer über z.b: Notepad++ an. Das es über den Editor von WP geht - weiß ich leider nicht.
HTML und CSS Kenntnisse liegen teilweise vor - Aber nur sehr begrenzt

Arne Drews

Ok, aber dann solltest Du es wie MrMurphy gesagt hat machen.
InlineCSS weglassen und komplett meiden, dafür richtiges CSS verwenden.

Wenn Du an bestimmten Stellen nicht weiter kommst, darfst Du sicher gerne wieder hier fragen, nehme ich an ( gerne mit den von Dir angestellten Versuchen )...

Text Größe font-size auto

Tags

Benutzer online in diesem Thema