Textgröße in %

[bubble]

Ich dachte es ist einfach! Und brauche nur einen Denkanstoß.

Mit Java: woher bekomme ich die Fenstergröße/Bildgröße. (Ich bin noch ein relativer Neuling in Java).
Und wie lässt sich die Schriftgröße stetig Skalieren auch wenn ich den Größenwert ständig ändere?

Java und JavaSCRIPT(!!) ist ein riesiger Unterschied, bitte nicht verwechseln ;)

Als erstes müsste man halt definieren, ob man nach Höhe oder nach Breite des Browserfensters geht. Ich geh jetzt einfach mal von Breite aus.

var fensterBreite = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || -1;
var fenster legt eine Variable an, mit = wird ihr der Wert rechts zugewiesen.
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth sieht komplizierter aus als es eigentlich ist.
Verschiedene Browser lagern die Fensterbreite/-höhe in verschiedenen Objekten aus. Von links nach rechts, wird nun getestet ob die Variable existiert (bzw. nicht undefiniert ist), wenn sie existiert, wird der Wert in fensterBreite gespeichert und der Rest ignoriert, existiert sie nicht/ist undefiniert, geht das gleiche spiel mit der nächsten Variablen los, wenn keine der Variablen existiert/definiert ist, wird der Wert -1 in fensterBreite gespeichert.

Um die aktuelle Schriftgröße relativ zur Fensterbreite zu bekommen, muss man nun ein wenig rechnen und ein paar Standardwerte definieren.
Meistens will man ja eine maximale und eine minimale Schriftgröße haben. Also müssen diese auch definiert werden.
var minSchriftgroesse = 4, maxSchriftgroesse = 50;
Um die aktuelle Schriftgröße zu berechnen braucht man dann nur noch eine Schriftgröße zu einer bestimmten Fensterbreite definieren und kann dann ganz simpel via Verhältnisgleichung rechnen.
var festSchriftgroesse = 20, festFensterbreite = 400;
So zur Verhältnisgleichung:
festSchriftgroesse / festFensterbreite = aktuelleSchriftgroesse / aktuelleFensterbreite
das ein wenig umgeformt ergibt dann:
var aktuelleSchriftgroesse = festSchriftgroesse * aktuelleFensterbreite / festFensterbreite;
So nun hat man allerdings noch seine minmale und maximale Schriftgröße, das Math-Objekt hat dafür zwei nützliche Funktionen: Math.min(a,b) und Math.max(a,b)
Math.min gibt den kleineren Wert zurück,
Math.max den größeren.
aktuelleSchriftgroesse = Math.max(Math.min(aktuelleSchriftgroesse,maxSchriftgroesse),minSchriftgroesse);

Jetzt fehlt nur noch, wie man denn die neu berechnete Schriftgröße für das Hauptelement setzt.
Um leichter Zugriff auf das Element zu haben, gehe ich davon aus das es die id "main" hat.

Als erstes besorgen wir uns das Objekt des Elements und speichern es in die Variable element
var element = document.getElementById("main");
Die Schriftgröße kann man dann wie folgt setzen:
element.style.fontSize = "50px";

Nun kann man das alles noch in eine Funktion stopfen:

function setzeSchriftgroesse(){  
	var minSchriftgroesse = 4, maxSchriftgroesse = 50, festSchriftgroesse = 20, festFensterbreite = 400;  
	var aktuelleFensterbreite = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || -1;  
	if(aktuelleFensterbreite>0){  
		var aktuelleSchriftgroesse = festSchriftgroesse * aktuelleFensterbreite / festFensterbreite;  
		aktuelleSchriftgroesse = Math.max(Math.min(aktuelleSchriftgroesse,maxSchriftgroesse),minSchriftgroesse);  
		var element = document.getElementById("main");  
		element.style.fontSize = aktuelleSchriftgroesse+"px";  
	}  
}

Diese Funktion muss jetzt jedes Mal wenn sich die Fenstergröße ändert aufgerufen werden.
Dafür gibt es das window hat eine Eigenschaft die onresize heißt, weise ihr eine Funktion zu und diese Funktion wird jedes mal beim Vergrößern/Verkleinern des Fensters ausgeführt:
window.onresize = setzeSchriftgroesse;

Alles in allem ist es dieser JavaScript-Code:

function setzeSchriftgroesse(){  
	var minSchriftgroesse = 4, maxSchriftgroesse = 50, festSchriftgroesse = 20, festFensterbreite = 400;  
	var aktuelleFensterbreite = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || -1;  
	if(aktuelleFensterbreite>0){  
		var aktuelleSchriftgroesse = festSchriftgroesse * aktuelleFensterbreite / festFensterbreite;  
		aktuelleSchriftgroesse = Math.max(Math.min(aktuelleSchriftgroesse,maxSchriftgroesse),minSchriftgroesse);  
		var element = document.getElementById("main");  
		element.style.fontSize = aktuelleSchriftgroesse+"px";  
	}  
}  
  
window.onresize = setzeSchriftgroesse;

MfG
bubble