CSS je nach Auflösung

[bobomampf]

Hey,
ich hab ein kleines Problemchen..

Ich habe ne Homepage, welche von großen Bildern lebt und einer möglichst großen Ausnutzung der Bildschirmbreite. Allerdings kann ich die Seite nicht auf 1600px Breite optimieren, da es auch Leute mit 1024x768 oder auch 1920x800 geben soll. Deshalb suche ich nach einer Möglichkeit, mit der ich je nach ausgelesener Auflösung die nächstbeste CSS laden kann. Es soll möglich sein für alles bis 1240px Breite. Von 1240px bis 1580px und dann alles darüber bis 1920px.

Ich suche mich dumm und dämlich aber finde keine Lösung die klappt oder mich zufrieden stellt. Ich weiss auch nicht, ob es unbedingt mit Javascript gemacht werden muss.

Kann mir da jemand helfen?

 

[Queckezz]

MAIN.CSS

// --- Layout  Initial

body {
  // dein Standard Style
}

...

// --- Layout  Responsive  

@media screen and (max-width: 1024px){
  @import '1024.css';
}

@media screen and (max-width: 768px){
  @import '768.css';
}

usw...

http://www.css3.info/preview/media-queries/

Queckezz

 

[joocom]

Bzgl. der Bilder kann ich dir ein JQuery Plugin namens "jQuery Picture" empfehlen. Einfach im HTML die Bilder zu den jeweiligen Auflösungen verdrahten und das Plugin kümmert sich im Hintergrund welches der User zu sehen bekommt. Sehr nützlich und einfach. Hier kurz vorgestellt: Responsive Images mit jQuery Picture | joocom Technologie News

 

[Queckezz]

Dieses Plugin scheint mir ziemlich unnötig. Man kann ein Image ganz einfach ein "max-width"- Attribut mit der Value 100% hinzufügen und es funktioniert auf dieselbe weiss wie beim Plugin demonstriert. Korrigier mich wenn ich da falsch liege.
Resizin’ My Images, Boss.