zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ausgangsgröße für Text für Responsive Seiten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.05.2020, 14:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.03.2007
Beiträge: 12
GELight befindet sich auf einem aufstrebenden Ast
Standard Ausgangsgröße für Text für Responsive Seiten

Hi alle zusammen,

Jetzt mache ich das ganze Thema auch beruflich schon wirklich lange aber je mehr verschiedene Devices dazu kommen, desto weniger sicher bin ich dabei zu entscheiden, auf welcher Art und Weiße ich meine Textgrößen bestimmen sollte.

Das Ganze beginnt bei der Frage:
"Welche Textgröße (Ausgangsgröße) für den Body und in welchem Format ( px, em, rem, vw, vh ???? )"

... und endet meist jedesmal mit der Frage:
"Auf welche Weiße sollte man die Textgröße für die einzelnen Devices/Breakpoints definieren? (fix in px, em, rem, vw, vh oder gar %) ???"

Wie sind eure Erfahrungen damit?
Man möchte meinen, ich sollte nach 20 Jahren im Web wissen, wie es am besten geht aber je mehr Projekte man macht, je mehr Frameworks/Libs es gibt, desto weniger scheint es einen allgemein guten Weg zu geben. Jeder fängt immer "irgendwie" immer wiedér auf der grünen Wiese an und wenn man selbst nicht mehr weiter weiß, heißt es oft.... nehmen wir lieber Bootstrap ... Google wird sich schon was dabei gedacht haben. In meinem aktuellen privaten Projekt will ich aber aus verschiedenen Gründen absichtlich so wenig als möglich Abhängigkeiten zu eventuellen Frameworks/Libs haben.

Warum frag ich das überhaupt?
Ich hab aktuell das Problem, das Gefühl zu haben, nicht mehr zu wissen mit welcher Art der Angabe einer Textgröße man für die Arbeit in Responsive-UI arbeiten muss. Hinzu kommt, meine Textgrößen irgendwie in jedem Device/Auflösung oder sogar Orientation oder auch in den DevTools für die einzelnen Mobile Devices, total unterschiedliche Textgrößen habe. Ja es liegt natürlich an den unterschiedlichen Auflösungen der Geräte aber auf der einen Seite scheint Bootstrap auch mit PX zu arbeiten auf der anderen Seite scheint PX mittlerweile die falscheste Art der Angabe für Textgrößen zu sein, wenn man die verschiedenen Auflösungen betrachtet.

...Ich hab aktuell keine gute Kontrolle über die Textgrößen...

Wie sind eure Erfahrungen auf meine Fragen?

Gruß Mario

Geändert von GELight (17.05.2020 um 14:25 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.05.2020, 15:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.065
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Erstens: bootstrap kommt von twitter, nicht von google. Google hat nichts damit zu tun.
Auch verwendet bootstrap keine pixel sondern rem für seine Größenangaben (hast du hier eventuell nicht auf die aktuelle Version geschaut, weiß nicht auswendig wie das bei alten Versionen gehandhabt wird)

Wenn man nie eine Größe anpasst dann passen die Größen doch auch immer für die jeweiligen devices. Standardgrößen sind doch meist auf jedem Gerät so eingestellt dass sie passen.

Auch sollte man doch Textgrößen an so wenig Stellen wie möglich anpassen damit sie in unterschiedlichen Konstellationen ok aussehen, oder habe ich da einen denkfehler?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.05.2020, 07:58
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Oft gibt es doch gar kein richtig oder falsch. Auch px können für die Textgröße ihre Berechtigung haben. Jeder geht hier anders vor, auch "Profis". Ich denke, dass vieles Geschmacksache ist und kann mit nahezu allen Größenangaben zum Ziel kommen.

Ich persönlich nutze hauptsächlich REM, damit die Texte in allen Browsern ohne Probleme skaliert werden können. Ältere Versionen vom IE können das, wenn ich mich richtig erinnere, nicht, wenn man mit px arbeitet.

Allerdings setze ich zuerst die Schriftgröße vom html-Element auf font-size: 62.5%;, damit das Umrechnen leichter fällt. Denn normalerweise entspricht 1rem = 16px, mit dieser Methode ist ein 1rem = 10px und wenn du nun vorhast, eine Überschrift in einer Größe von 36px darzustellen, kannst du einfach 3.6rem schreiben anstatt es umrechnen zu müssen oder Funktionen dafür zu verwenden. Ein weiteres Merkmal der REMs ist ja, dass sie sich relativ zur Schriftgröße des root-Elements verhalten (also <html>). Ich selbst habe es noch nie gemacht, aber wenn man z.B. vorhat, für eine mobile Auflösung viele Texte zu verkleinern, könnte man einfach die Schriftgröße vom <html> reduzieren und dann passen sich sämtliche Texte der Seite an.

Bei margins von Textelementen arbeite ich gerne mal mit EMs, da sie relativ zur eigenen Schriftgröße sind. Wenn z.B. eine Überschrift einen Abstand nach unten hat, müsste ich ihn bei jedem Breakpoint zusammen mit der Schriftgröße ändern. Durch die Verwendung von EMs muss ich nur noch die Schriftgröße ändern und der Abstand nach unten passt sich automatisch proportional an.

Die Einheit vw verwende ich auch öfters mal bei Schriftgrößen. Beispielsweise dann, wenn ein Element (z.B. ein Hintergrundbild) eine feste Höhe, aber eine prozentuale Breite zum Browserfenster hat. Das Element wird immer schmaler und irgendwann passt der Text nicht mehr rein. Um hier nicht ständig mit Media Queries arbeiten zu müssen, benutze ich einfach vw.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 17:30
Parent DIV soll mit der Höhe seines Childs wachsen Tekkla CSS 2 19.11.2009 18:27
gibt es eine andere Lösung ohne Tabelle? online CSS 16 24.04.2009 08:41
Float und Clear Earl of Green CSS 3 22.02.2009 18:48
Zeilenabstand bei font-Angabe wieder weg nick CSS 7 16.02.2008 14:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:15 Uhr.