zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden responsive html{font-size} setzen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.08.2018, 18:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2018
Ort: Heidelberg
Beiträge: 4
frechBengel befindet sich auf einem aufstrebenden Ast
Standard responsive html{font-size} setzen?

Hallo,

Vor meiner Frage ein paar Informationen darüber, worum es geht. Ich möchte eine Web-Seite erstellen, auf der blogähnlich ein paar Essays zu verschiedenen Themen erscheinen. Ich lege dabei Wert auf eine gute Typographie, einen einfachen Code, der auch bei schlechter inet-Leitung flink geladen und dargestellt ist. HTML5 konformer Code versteht sich von selbst. Die Seite soll am Ende adaptive und responsive Elemente verbinden, um auf allen Medien ansehnlich und gut lesbar zu sein.

Dabei stehen adaptive Elemente im Vordergrund. Ich lege keinen Wert darauf, dass die Seite pixelgenau perfekt auf allen Medien dargestellt wird, sondern denke mehr an einfachen Code, einfache Divs, die jeder Browser überall hinreichend gut darstellen sollte.

Ich glaube, dass ich nicht ganz um responsives Design herum komme. Ein erster Punkt ist, dass man auf einem Smartphone oder Tablet im Hochformat natürlich die (fast) volle Breite des Displays nutzen möchte, während auf einem 16:9 Display zugunsten einer gut lesbaren Zeilenlänge entsprechende Teile des Displays ungenutzt bleiben müssen. Wie ich das gelöst habe, seht ihr an meinem Code und ich bin auch dazu für alle Kommentare dankbar.

Meine konkrete Frage:

Ich bin unsicher wie ich die Schriftgröße richtig einstellen soll. Meine Idee ist, im CSS Code für html eine intiale font-size zu setzen, die auf alle Elemente vererbt wird. p, h1, h1 und so weiter möchte ich dann mit rem oder em bestimmen. -- 1. Ist das sinnvoll? 2. Sollte ich vielleicht besser device-min-height verwenden? 3. Oder ist das totaler Quatsch und ich fahre am besten, indem ich sage html{font-size: 110%;} und damit einfach die im Browser voreingestellte Schriftgröße etwas größer mache?

Vielen Dank im Voraus für Eure Kommentare und Hilfe

frechBengel








Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.08.2018, 09:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.980
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Inwiefern unterscheiden sich 1 und 3?
Und was hat device-min-height mit einer Schriftgröße zu tun?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.08.2018, 09:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2018
Ort: Heidelberg
Beiträge: 4
frechBengel befindet sich auf einem aufstrebenden Ast
Standard

@ 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 % */
Mit Zitat antworten
  #4 (permalink)  
Alt 20.08.2018, 10:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.980
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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?
Mit Zitat antworten
  #5 (permalink)  
Alt 20.08.2018, 11:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2018
Ort: Heidelberg
Beiträge: 4
frechBengel befindet sich auf einem aufstrebenden Ast
Standard

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ß:

Mit Zitat antworten
  #6 (permalink)  
Alt 20.08.2018, 13:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.980
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von frechBengel Beitrag anzeigen
Ist schon ernst, aber ich bin ja hier, um mich eines besseren belehren zu lassen, wenn ich da Unfug mache. ^^
Sicher kann man es so machen, wenn du mti dem Ergebnis zufrieden bist, dann ist es doch ok.
Auch wenn ich mich wiederhole:
Was spricht dagegen, nur ein- zwei Anpassungen vorzunehmen?



Zitat:
Zitat von frechBengel Beitrag anzeigen
Auf so einem Display ist eine 14px Schrift zwischen 3,1% und 3,5% der viewport-höhe genau richtig groß:
Wenn du das für deine Seite bestimmst dann passt es ja

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
Mit Zitat antworten
  #7 (permalink)  
Alt 20.08.2018, 14:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2018
Ort: Heidelberg
Beiträge: 4
frechBengel befindet sich auf einem aufstrebenden Ast
Standard

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?
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
responsive Webseite runner CSS 4 14.09.2015 21:45
Kachelmuster via html - Responsive Design freundlich SamuelS (X)HTML 10 31.01.2014 08:00
Kundeninteresse an Responsive Layout heiko_rs Offtopic 18 24.05.2013 13:37
Text ohne Absatz setzen dercoe CSS 25 24.11.2012 19:48
Problem mit Dastellung in IE7 und FF ConiKost CSS 1 05.07.2006 12:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:37 Uhr.