Sponsored Links |
|
|||
@ cloned
Die drei Bilder unterscheiden sich darin, dass die Ränder responsiv auf den viewport jeweils andere sind. Mit der Schriftgröße hat das zu tun, wenn die Schriftgröße auf 2% der Bildschirmhöhe einstellen möchte bzw. für verschiedene Bildschirmauflösungen und Größen verschiedene Schriftgrößen. Auf meinem alten Netbook (LG X110, 10", 1024x600) ist 2% z. B. zu klein. Die Schrift ist dann unlesbar. Grundsätzlich scheint mir die Prozentangabe der Displayhöhe ein vernünftiger Ansatz zu sein, die richtige Schriftgröße zu bestimmen. Dazu würde sich natürlich »font-size: 2vh;« anbieten. Damit nimmt man dem Nutzer leider die Möglichkeit, mit Strg-Mausrad zu vergrößern und zu verkleinern. Das ist Mist. Daher habe ich mir diesen Code vom 1. Bild überlegt. Hier nochmal der Code: Code:
/* für alle */ #seite { margin: 0 auto; border: 0px; padding: 0px; } /* Smartphones und tablets: portrait */ @media(orientation: portrait){ #seite {width: 95%;} } /* alte low res netbooks: Bis 1050px VP-Breite */ @media(orientation: landscape) and (max-width: 1050px){ #seite {width: 95%;} } /* alte low res netbooks: Ab 1050px VP-Breite */ @media(orientation: landscape) and (min-width: 1050px){ #seite {width: 50%; max-width: 40rem; /* Begrenzung für ultrabreite Displays */ } } /* responsive Elemente: initiale Schriftgröße */ /* lies: "Wenn der Viewport mindestens XXXpx hoch ist, dann setze Schriftgröße auf */ @media(min-height: 400px){html{font-size: 14px;}} /* 14/400*100 = 3,5 % */ @media(min-height: 450px){html{font-size: 15px;}} @media(min-height: 500px){html{font-size: 16px;}} @media(min-height: 550px){html{font-size: 16px;}} @media(min-height: 600px){html{font-size: 17px;}} @media(min-height: 700px){html{font-size: 19px;}} @media(min-height: 800px){html{font-size: 21px;}} @media(min-height: 900px){html{font-size: 23px;}} @media(min-height: 1000px){html{font-size: 25px;}} /* 25/1000*100 = 2,5 % */ @media(min-height: 1100px){html{font-size: 28px;}} @media(min-height: 1200px){html{font-size: 30px;}} @media(min-height: 1300px){html{font-size: 33px;}} @media(min-height: 1400px){html{font-size: 35px;}} @media(min-height: 1500px){html{font-size: 38px;}} @media(min-height: 1750px){html{font-size: 42px;}} @media(min-height: 2000px){html{font-size: 46px;}} /* 46/2000*100 = 2,3 % */ |
|
|||
Die Bilder habe ich mir erst gar nicht angeschaut, mir ging es um deine Aufzählung.
Aber diese media-wurst die du da hast, die kann doch nicht ernst gemeint sein? Ich dachte, die Seite soll responsive sein? Dann verabschiede dich doch am Besten von fixen Pixelwerten. Auch solltest du mit möglichst wenig mediaqueries zu deinem Ziel kommen. 14px für html als font-size, das ist doch viel zu klein. Was spricht dagegen, nur ein- zwei Anpassungen vorzunehmen? |
|
|||
Ist schon ernst, aber ich bin ja hier, um mich eines besseren belehren zu lassen, wenn ich da Unfug mache. ^^
Darauf gekommen bin ich über die Versuche die font-size mit java-script zu bestimmen. Da gibt es Code-Snippets, die aufgrund der viewport-höhe die Schriftgröße ausrechnen und font-size entsprechend als css setzen. Das hat aber zwei Nachteile: 1. wird das beim Öffnen der Seite nur 1x berechnet und bleibt dann so, auch wenn man das Browserfenster ändert (z. B. Smartphone von Hochformat auf Querformat wechselt) und 2. fängt man nur wegen der Schriftgröße mit einer weiteren Sprache auf der Seite an. -- Macht man es mit der media-Query-Wurst, wird es immer ans Browserfenster angepaßt. Das läuft auch auf einem 10 Jahre Intel-Atom netbook rasend schnell. Vom code-ästhetischen Aspekt sehe ich natürlich ein, dass so viele Queries nicht schön sind. Was 14px Schriftgröße angeht, habe ich einen Screen gemacht. Die font-size: 14px; wirken ja nur auf ein Display, das zwischen 400 und 449px viewport höhe hat. Auf so einem Display ist eine 14px Schrift zwischen 3,1% und 3,5% der viewport-höhe genau richtig groß: |
|
|||
Zitat:
Auch wenn ich mich wiederhole: Was spricht dagegen, nur ein- zwei Anpassungen vorzunehmen? Zitat:
Was ich damit sagen will: Es gibt 100 verschiedene Möglichkeiten dein Ziel zu erreichen, finde einen Weg, der dir passt. Wenn du mit einer so unübersichtlichen media-wurst arbeiten kannst und dir die Standardwerte der Browser nicht passen, dann mach es so |
|
|||
Was spricht dagegen, nur ein oder zwei Anpassungen zu machen? Von einem alten Netbook mit 1024x600 (landscape) bis zu einem 4k Display im Hochformat sind viele Möglichkeiten drin. Dazu kommen dann ja auch noch Smartphones und Tablets. Ich habe wie gesagt java-script-Lösungen gesehen, die es »punktgenau« ausrechnen. Da habe ich mir gedacht, in meiner reinen css-Lösung einfach in 50er Schritten anzufangen bei 400px viewport-Höhe und später auf 100er und 250er zu gehen. Frei nach dem Motto: lieber eine Spur zu genau definieren als zu ungenau. Die Darstellungsgeschwindigkeit leidet wie gesagt darunter kein Stück. Die Seite ist rasend schnell aufgebaut, auch auf 10 Jahren alter Atom-CPU. Das einzige, was in meinen Augen soweit dagegen spricht ist natürlich, dass so rein vom Gefühl her so eine Query-Wurst, wo eine die vorhergehenden immer überschreibt, kein guter Code ist.
Du schreibst, das sei ok so, wenn mir »die Standardwerte der Browser nicht passen«. Du überschätzt mein Wissen. Ich habe keine Ahnung wie das aussieht und man das macht. Ich kann nur auf meinen Smartphone (fullHD), meinem Notebook-Display (FullHD) und dem alten netbook schauen, wie es ist. Daher fand es ich sei eine gute Idee, in einem Forum mit kompetenten Leuten nachzufragen. Was hälst Du denn von der ganz knappen Lösung: den Standardwert des Browsers zu nehmen, diesen vlt mit html{font-size: 110%;} etwas größer zu machen, und sich darüber hinaus auf den Standpunkt zu stellen, die Leute müssen halt ihren Browser einstellen und mit Strg-Mausrad geht ja auch noch eine Menge..? Reicht das für 95% aller Medien oder sieht sowas auf 50% der Medien zu groß oder zu klein aus? |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
responsive Webseite | runner | CSS | 4 | 14.09.2015 22:45 |
Kachelmuster via html - Responsive Design freundlich | SamuelS | (X)HTML | 10 | 31.01.2014 09:00 |
Kundeninteresse an Responsive Layout | heiko_rs | Offtopic | 18 | 24.05.2013 14:37 |
Text ohne Absatz setzen | dercoe | CSS | 25 | 24.11.2012 20:48 |
Problem mit Dastellung in IE7 und FF | ConiKost | CSS | 1 | 05.07.2006 13:59 |