Die Styles:
|
Quellcode
|
1
2
3
4
5
6
|
<style type="text/css">
#TextContainer
{
font-size: 18pt; /* Default-Textgöße */
}
</style>
|
Der Code:
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script type="text/javascript">
function AdjustFontSize()
{
var NewFontSize = 0;
if (navigator.appName == "Microsoft Internet Explorer")
NewFontSize = document.body.clientWidth * 0.18;
else
NewFontSize = window.innerWidth * 0.18;
document.getElementById("TextContainer").style.fontSize = NewFontSize + "%";
}
</script>
|
Body-Tag mit Events:
|
Quellcode
|
1
|
<body onresize="AdjustFontSize()" onload="AdjustFontSize()">
|
Ein DIV-Container:
|
Quellcode
|
1
|
<div id="TextContainer">Adjust me!</div>
|
Das Beispiel ändert die Textgröße des Containers mit der ID
TextContainer beim Laden und Verändern der Fenstergröße auf 18% der Breite des sichtbaren Bereichs (ClientWidth).
Funktioniert im IE (deshalb die Weiche) und anderen Browsern.
Styles und Javascript-Code in den Head-Bereich packen oder (besser) auslagern .