✔ CSS je nach Bildschirmauflösung

M

MOD

Mitglied
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
 
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.
 
Zuletzt bearbeitet:
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
 
Probier mal Folgendes:
HTML: 
<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">
Code: 
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.
 
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:
Code: 
<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
 
[…] funnktioniert aber leider nicht richtig... […]
Zum Vergrößern anklicken....
Was genau soll das heißen?

Probier dann mal Folgendes:
HTML: 
<link rel="stylesheet" type="text/css" href="layout/stormbyte800.css">
Code: 
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);
		}
	}
}
 
Super Gumbo, das tut...

kannst du mir bitte den unteren Teil mal erklären:
Code: 
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
 
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:
HTML: 
<link rel="stylesheet" type="text/css" href="layout/stormbyte800.css" id="stylesheet">
Code: 
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück