|
|||
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 15:25 Uhr) |
Sponsored Links |
|
|||
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? |
Sponsored Links |
|
|||
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. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Wrapper wächst nicht mit, keine Floats | maclady | CSS | 11 | 10.02.2010 18:30 |
Parent DIV soll mit der Höhe seines Childs wachsen | Tekkla | CSS | 2 | 19.11.2009 19:27 |
gibt es eine andere Lösung ohne Tabelle? | online | CSS | 16 | 24.04.2009 09:41 |
Float und Clear | Earl of Green | CSS | 3 | 22.02.2009 19:48 |
Zeilenabstand bei font-Angabe wieder weg | nick | CSS | 7 | 16.02.2008 15:39 |