✔ CSS je nach Bildschirmauflösung

[MOD]

Hallo zusammen,
ich sitze gerade an meiner neuen Homepage. Dafür möchte ich gerne auf die verschidenen Bildschirmauflösungen eingehen. Kann mir jemand aus dem Stehgreif ein Beispiel geben wie ich bei einer BA bis 1024 CSS-Datei 1 und bei einer BA größer als 1024 CSS-Datei zwei nimmt?
Die Seite ist dieselbe nur die CSS soll sich ändern.

Vielen Dank für eure Hilfe,

MOD

 

[con-f-use]

Man benutze bitte in Zukunft erst die die Forensuche bevor man poste!

 

[MOD]

Das hab ich getan. Geholfen hat das leider nix...
oder hast du da was gefunden?

 

[con-f-use]

Nein, aber ich hatte bis eben auch nicht gesucht, weil ich weiss, dass es mindestens vier Threads mit diesem Thema gibt.

z.B. das: http://www.tutorials.de/tutorials145693.html
eben in 3 Sekunden mit der Suche nach "CSS" und "Bildschirmaufloesung" gefunden.

Ich kann also kaum glauben, dass du gesucht hast und bin drauf und dran dir Faulheit zu unterstellen, aber vielleicht belehrst du mich ja eines Besseren und markierst das Thema als erledigt.

 

[MOD]

Ich danke dir heftigst für deine schnelle Hilfe. Mein Fehler bei der Suche war das Deutsche, denn wenn man nach Bildschirmauflösung sucht, erscheint rein garnix.

THX

MOD

 

[Gumbo]

Probier mal Folgendes:

<link rel="stylesheet" type="text/css" href="style-1.css" title="Default-Stil">
<link rel="alternate stylesheet" type="text/css" href="style-2.css" title="1024er-Stil">
<link rel="alternate stylesheet" type="text/css" href="style-3.css" title="1280er-Stil">

function reassignStylesheet()
{
	var windowWidth = null;
	if( parseInt(navigator.appVersion) > 3 ) {
		if( navigator.appName == "Netscape" ) {
			windowWidth = window.innerWidth;
		}
		if( navigator.appName.indexOf("Microsoft") !=-1 ) {
			windowWidth = document.body.offsetWidth;
		}
	}
	if( typeof windowWidth != "object" || windowWidth ) {
		for(var i=0; i<document.styleSheets.length; i++) {
			var tmp = document.styleSheets[i].title.match(/^\d+/);
			if( tmp ) {
				document.styleSheets[i].disabled = ( windowWidth < tmp );
			}
		}
	}
}
window.onload	= reassignStylesheet;
window.onresize	= reassignStylesheet;

Ich weiß allerdings nicht, wie viele Browser bereits das styleSheets-Interface implementiert haben.

 

[MOD]

Danke Gumbo,
funnktioniert aber leider nicht richtig...
Ich habe jetzt mal selbst was probiert, allerdings bin ich in JavaScript nicht besonders gut.

Ich bekomme meinen Stylesheet-Link als Variable (x), diese kann ich auch per document.write ausgeben, allerdings krieg ich die nicht in die Stylesheetanweisung eingelesen. Kann mir dabei vielleicht jemand helfen? Hier ist der SouceCode:

<script language="javascript">
var x = "0";
var al800 = "layout/stormbyte800.css";
var al1000 = "layout/stormbyte1000.css";

if (screen.width < 1000)
	{
	x = al800;
	}
else {
	x = al1000;
	 }

document.write (x)

</script>
<link href="javascript:(x)" rel="stylesheet" type="text/css" />

THX, MOD

 

[Gumbo]

[…] funnktioniert aber leider nicht richtig... […]

Was genau soll das heißen?

Probier dann mal Folgendes:

<link rel="stylesheet" type="text/css" href="layout/stormbyte800.css">

window.onload = function()
{
	var defaultStylesheetHref = "layout/stormbyte800.css";
	if( screen.width < 1000 ) {
		var stylesheetHref = defaultStylesheetHref;
	} else {
		var stylesheetHref = "layout/stormbyte1000.css";
	}
	var linkElements = document.getElementsByTagName("link");
	for(var i=0; i<linkElements.length; i++) {
		if( linkElements[i].getAttribute("href") == defaultStylesheetHref ) {
			linkElements[i].setAttribute("href", stylesheetHref);
		}
	}
}

 

[MOD]

Super Gumbo, das tut...

kannst du mir bitte den unteren Teil mal erklären:

var linkElements = document.getElementsByTagName("link");
	for(var i=0; i<linkElements.length; i++) {
		if( linkElements[i].getAttribute("href") == defaultStylesheetHref ) {
			linkElements[i].setAttribute("href", stylesheetHref);
		}

Warum hast du da nen Zähler (i) drin?

THX, MOD

 

[Gumbo]

Der Zähler wird benötigt um alle Array-Elemente des Arrays „abzuklappern“. Allerdings merke ich gerade, dass die Zuweisung einer ID die einfachere Lösung wäre:

<link rel="stylesheet" type="text/css" href="layout/stormbyte800.css" id="stylesheet">

window.onload = function()
{
	var defaultStylesheetHref = "layout/stormbyte800.css";
	if( screen.width < 1000 ) {
		var stylesheetHref = defaultStylesheetHref;
	} else {
		var stylesheetHref = "layout/stormbyte1000.css";
	}
	document.getElementById("stylesheet").setAttribute("href", stylesheetHref);
}

Achja, passend zum Thema: Kevin Hale: Dynamic Resolution Dependent Layouts