Schriftgröße für Darstellung auf mobilen Endgeräten optimieren

tomislav · 15. März 2020

Hallo zusammen,

ich nutze das Helix 3 Template und habe folgendes Problem:

Ich habe die Schriftgröße meiner Seitenüberschrift geändert und habe dann festgestellt, dass die Überschrift beim Öffnen auf dem iPhone nicht korrekt dargestellt wird. Weil die Seitenüberschrift zu lang war ("Datenschutzerklärung"), hat nicht das komplette Wort auf mein kleines iPhone Display gepasst und wurde daher abgeschnitten dargestellt.

Hierfür gibt es doch bestimmt einen CSS-Code oder? Ich hätte gerne, dass die Schriftgröße der einzelnen Beiträge bzw. Seitenüberschriften sich prozentual an das mobile Endgerät anpasst. Kann mir da jemand weiterhelfen?

Link zur Seite: https://maler-spiess.de/index.php/datenschutz

Besten Dank im Voraus!

tomislav

Re:Later · 15. März 2020

Bei mir, bzw. Bootstrap 4, sieht das z.B. so aus:

Heißt, die Überschriften werden responsiv anhand der Bildschirmbreite dynamisch kalkuliert.

Code

h1, .h1 {
  font-size: 2rem;
}

@media (max-width: 1200px) {
  h1, .h1 {
    font-size: calc(1.325rem + 0.9vw) ;
  }
}

h2, .h2 {
  font-size: 1.75rem;
}

@media (max-width: 1200px) {
  h2, .h2 {
    font-size: calc(1.3rem + 0.6vw) ;
  }
}

h3, .h3 {
  font-size: 1.5rem;
}

@media (max-width: 1200px) {
  h3, .h3 {
    font-size: calc(1.275rem + 0.3vw) ;
  }
}

h4, .h4 {
  font-size: 1.25rem;
}

h5, .h5 {
  font-size: 1.1rem;
}

h6, .h6 {
  font-size: 1rem;
}

Alles anzeigen

Pro-Tipp :

In Bootstrap-4-SASS

Code

$enable-responsive-font-sizes: true;

Für Selberbäcker: https://github.com/twbs/bootst…4.1/scss/vendor/_rfs.scss

Oder für ganz harte Selberbäcker: https://github.com/twbs/rfs

tomislav · 15. März 2020

Zitat von Re:Later
Bei mir, bzw. Bootstrap 4, sieht das z.B. so aus:

Heißt, die Überschriften werden responsiv anhand der Bildschirmbreite dynamisch kalkuliert.
Code
h1, .h1 {
  font-size: 2rem;
}

@media (max-width: 1200px) {
  h1, .h1 {
    font-size: calc(1.325rem + 0.9vw) ;
  }
}

h2, .h2 {
  font-size: 1.75rem;
}

@media (max-width: 1200px) {
  h2, .h2 {
    font-size: calc(1.3rem + 0.6vw) ;
  }
}

h3, .h3 {
  font-size: 1.5rem;
}

@media (max-width: 1200px) {
  h3, .h3 {
    font-size: calc(1.275rem + 0.3vw) ;
  }
}

h4, .h4 {
  font-size: 1.25rem;
}

h5, .h5 {
  font-size: 1.1rem;
}

h6, .h6 {
  font-size: 1rem;
}
Alles anzeigen
Pro-Tipp :

In Bootstrap-4-SASS
Code
$enable-responsive-font-sizes: true;
Für Selberbäcker: https://github.com/twbs/bootst…4.1/scss/vendor/_rfs.scss

Oder für ganz harte Selberbäcker: https://github.com/twbs/rfs
Alles anzeigen

Hallo Re:Later,

das hat bei mir leider nicht funktioniert oder ich bin einfach zu blöd...

Gibt es andere Möglichkeiten?

tomislav

christine2 · 15. März 2020

Hallo Tomislav,

kannst versichert sein, Re:Later ist ein guter Bäcker - Bei mir bleibt der Kuchen manchmal kleben

Geb da mal ein paar Bröserln drauf. Probiers z.B. mit:

CSS

@media (max-width: 1200px) {
h2, .h2 {
font-size: 1.75rem !important;
  }
}

Hab da jetzt aber nur die h2 berücksichtigt.

Das !Important; musste ich dazugeben, weil es einen Inline Code gibt:

.entry-header h2 von 32px;

Ansonsten, wird der Kollege weiter kneten.

Liebe Grüße

Christine

Re:Later · 15. März 2020

Inline-Stile kann ich natürlich nicht ahnen. Macht man halt nicht, bzw. nicht mehr.

Und Pixelgrößen auch nicht mehr.

Aber das nur, um es gesagt zu haben. Je mehr man dovon reinbastelt, desto "unhandlicher" wird die Seite im Laufe der Zeit.

tomislav · 15. März 2020

Zitat von christine2
Hallo Tomislav,

kannst versichert sein, Re:Later ist ein guter Bäcker - Bei mir bleibt der Kuchen manchmal kleben

Geb da mal ein paar Bröserln drauf. Probiers z.B. mit:
CSS
@media (max-width: 1200px) {
h2, .h2 {
font-size: 1.75rem !important;
  }
}
Hab da jetzt aber nur die h2 berücksichtigt.

Das !Important; musste ich dazugeben, weil es einen Inline Code gibt:

.entry-header h2 von 32px;

Ansonsten, wird der Kollege weiter kneten.

Liebe Grüße

Christine
Alles anzeigen

Hallo Christine,

vielen Dank, das hat funktioniert!

Ich bin sicher, dass Re:Later ein hervorragender Bäcker ist... seine Rezepte waren für mich als Schülerpraktikant in der Backstube wohl einfach zu schwer zum Nachbacken

An dieser Stelle auch nochmal vielen Dank an Re:Later!

LG

tomislav

christine2 · 16. März 2020

Hallo tomislav

Nun ja, war mir schon sicher, dass der Code funktionieren wird. War/ist nur eine Notlösung.

Zitat von Re:Later

Inline-Stile kann ich natürlich nicht ahnen. Macht man halt nicht, bzw. nicht mehr.

Und Pixelgrößen auch nicht mehr.

Aber das nur, um es gesagt zu haben. Je mehr man dovon reinbastelt, desto "unhandlicher" wird die Seite im Laufe der Zeit.

Da hat unser Re:Later als Bäckermeister Recht.

Zu seinem Pro-Tipp, brauchen wir wohl noch die Gesellenprüfung.

Du erkennst es daran: Schau mal in den Seitenquelltext: Beginnt mit:

Code

<style type="text/css">  ........

Inline-Segmente-Stile:

a) weiß jetzt nicht, wo/wie man das im Helix einstellt. Wird wohl im Template sein.

b) bei nächster Formatierungsänderung wird es wohl wieder ähnlich sein.

c) In einem anderen Thread verwies ich schon mal auf die custom.css (Doku von Helix).

Pixel vs. rem:

Gut ja, da wird man nicht viel dran ändern können, weil Helix alles in px ausliefert.

Deine Texte Inline-Stile:

hast Du das <p> Segment auch mit Editor gemacht.

Durch obige Hinweise, wollte ich dies klarstellen.

Liebe Grüße

Christine

Re:Later · 16. März 2020

Off-Topic:

rem zu verwenden, vereinfacht einfach die Sache, wenn man sich beispielsweise entscheidet die Schriftgrößen überall in einem bestimmten Verhältnis relativ zu erhöhen/reduzieren, auch in Absätzen und so.

Die Schriftgröße des HTML-Elements <html> ist die Basis. Jedes rem, egal wo, bezieht sich auf diese 1 Schriftgröße und nicht auf einen oder sogar mehrere, umgebenden Sonstwas-Container, wie das bei em oder % der Fall wäre. Das rem reduziert den Gehirnschmalz im Gebäck.

Bootstrap-4 st bspw. plump genug, davon auszugehen, dass der jeweilige Browser schon schlau genug ist, diese Basis-Schriftgröße passend mitzubringen, meist 16px und setzt gar keinen Wert für das <html>-Element. Aber setzt man einen z.B. auf font-size 13px gehen alle anderen ge-rem-ten Größenangaben automatisch mit, z.B. auch ge-rem-te Abstände zwischen Absätzen. Der Gesamteindruck der Seite bleibt weitestgehend erhalten.

Und weil Internet-Explorer 8 wohl endgültig tot sind, muss man keine Angst mehr haben

Auch wenn man dieses calc()-Dingens verwendet.

Aber soll tomislav jetzt nicht verwirren. Selbstverständlich kann man auch Pixel verwenden. Halt ggf. mehr Arbeit. Mein Code war nicht als Fix-und-Fertig-Glasur gedacht, sondern sollte nur die Möglichkeiten zeigen Schriftgrößen durchgehend neu zu berechnen, je nach Bildschirmbreite. Unterhalb 1201Pixel schrumpft sie halt so kontinuierlich(!) mit der Breite. Und man muss sich nur noch mit 1 Größe bei 1201Pixel beschäftigen und die passend einstellen. Rest ist Magie.