Unterschiedliche Stylesheets für unterschiedlich große Browser Fenster

Auch bekannt als „auflösungsabhängige Layouts“. Eine Website, verschiedene CSS-Dateien zum Neuordnen einer Website, um die verfügbare Größe zu nutzen.

Es gibt eine W3C-standardisierte Methode, sie zu deklarieren. Eine Möglichkeit ist, die „device-width“ zu testen, wie hier:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

Der obige Code wendet das Styling von 800.css nur dann auf das Dokument an, wenn das Gerät, das es anzeigt, eine Breite von 800 Pixeln oder mehr hat. Und… unterstützt auf diese Weise „Media Queries“.

Beachten Sie, dass dies die Gerätebreite ist, nicht die aktuelle Breite des Browserfensters. Auf dem iPhone (3G(s)) bedeutet das 480 Pixel. Mein neues schickes MacBook Pro gibt für die Gerätebreite 1920 Pixel zurück. Aber mein tatsächliches Browserfenster ist im Moment nur halb so breit. Die Gerätebreite ist bei mobilen Geräten sehr nützlich, da der Browser wahrscheinlich immer 100 % des Bildschirms ausfüllt, wenn er verwendet wird, aber bei Laptop-/Desktop-Browsern weniger nützlich ist.

Scheint mir viel nützlicher zu sein die aktuelle Breite des Browserfensters („Viewport“). Wir können sogar Stylesheets angeben, die nur verwendet werden sollen, wenn der Viewport zwischen zwei verschiedenen Pixelgrößen liegt

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

Dieses Stylesheet wird nur wirksam, wenn das aktuelle Browserfenster zwischen 701 und 900 Pixel breit ist.

Browser-Unterstützung

IE 9+, Firefox 3.6+, Safari 3+, Alle Chrome, Opera 10+. Mozilla schlägt vor, das Media-Attribut von <link /> mit „only“ zu beginnen, wodurch das Stylesheet vor älteren Browsern versteckt wird, die keine Media Queries unterstützen. Das mag beabsichtigt sein oder auch nicht… fallabhängig natürlich.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Im Allgemeinen ist das Layout eine der Dinge, bei denen es schwierig ist, „progressive enhancement“ zu verkaufen. Abgerundete Ecken werden zu Quadraten, kein großes Problem. Ein vermasseltes Layout, das ist ein großes Problem. Geräte wie das iPhone sind im Moment ziemlich großartig, da die Browserauswahl so begrenzt ist (früher gab es nur Mobile Safari und das war's, jetzt gibt es auch Opera) und sie sehr gute Browser sind, kann man sich auf Techniken wie diese verlassen, dass sie funktionieren.

Wenn IE-Unterstützung von entscheidender Bedeutung ist, haben wir immer noch JavaScript!

Mit jQuery umsetzen

Mit JavaScript können wir die Fensterbreite testen und die aktive CSS-Datei entsprechend ändern. Dies funktioniert in allen Browsern. Sie können einem <link />-Element wie jedem anderen eine ID geben, also fügen wir diese hinzu

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

Dann können wir diese als Haken verwenden und den href-Wert des Stylesheets ändern. Der Browser sieht diese Änderung und entfernt das alte CSS und wendet das neu verknüpfte CSS erneut an. Wir führen unseren kleinen Anpassungstest einmal sofort durch und dann jedes Mal, wenn das Fenster danach resized wird.

function adjustStyle(width) {
  width = parseInt(width);
  if (width < 701) {
    $("#size-stylesheet").attr("href", "css/narrow.css");
  } else if (width < 900) {
    $("#size-stylesheet").attr("href", "css/medium.css");
  } else {
     $("#size-stylesheet").attr("href", "css/wide.css"); 
  }
}

$(function() {
  adjustStyle($(this).width());
  $(window).resize(function() {
    adjustStyle($(this).width());
  });
});

Ist jQuery wirklich nötig, nur dafür?

Nein, aber ich bin sicher, Sie wissen, dass das einfach meine Art ist, im Allgemeinen, und es macht es einfacher. Kevin Hale schrieb vor buchstäblich fünf Jahren über dynamische Auflösungs-Layouts. Es ist „rohes“ JavaScript und funktioniert auch heute noch großartig.

Außerdem gibt es ein geniales Polyfill: Respond.js

Video

Resolution Dependent Layout with CSS von Chris Coyier auf Vimeo.

Beispiel Eins

Dieses hat ein spezielles Stylesheet für schmale (weniger als 700 Pixel), mittlere (701 – 900 Pixel) und breite (mehr als 901 Pixel) Browserfenster.

Demo ansehen

Beispiel Zwei

Dies tut genau dasselbe wie Beispiel Eins, nur über jQuery/JavaScript anstelle von CSS-Media-Queries.

Demo ansehen

Beispiel Drei

Dieses Beispiel zeigt, dass wir mobile Geräte ansprechen können, indem wir eine maximale Gerätebreite testen.

Demo ansehen

Download

Schnappen Sie sich alle diese als Referenz an einem Ort.

Dateien herunterladen