Media Queries und Page Zoom

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Und zwar binde ich zu Testzwecken folgende 2 Stylesheets ein:

<link rel="stylesheet" media="screen and (max-device-width: 959px)" href="style_1.css">

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

  
Das machst du hoffentlich nur zu Testzwecken so, oder? Mehrere Stylesheets sind keine gute Idee, aus mehreren Gründen.  
  
1\. Performanz: Browser laden \_alle\_ Stylesheet, egal ob das Media-Query gerade zutrifft oder nicht. (Das gilt auch für @media="print".) Das führt zu unnötig vielen HTTP-Requests und unnötig viel übertragenen Daten. Die Stylesheets werden ja nicht gänzlich unterschiedlich sein, sondern viele Gemeinsamkeiten aufweisen.  
  
Und das füht gleich zu  
  
2\. Wartbarkeit: Änderungen müssen nicht nur an einer Stelle gemacht werden, sondern alle Stylesheets müssen gepflegt werden. Don’t do this! DRY!  
  
Es sollten nicht mehrere Stylesheet mit mehreren link-Elementen eingebunden werden, sondern ein Stylesheet in einem link-Element ohne @media-Attribut. In diesem Stylesheet befinden sich dann sämtliche Media-Querys in @media-At-Regeln.  
  
  
max-/min-device-width ist vermutlich nicht das, was du verwenden willst. “There are two relevant media queries: width/height and device-width/device-height. […] Which should you use? That’s a no-brainer: width, of course. Web developers are not interested in the device width; it’s the width of the browser window that counts.” [[viewports](http://www.quirksmode.org/mobile/viewports.html)]  
  
Vielleicht gibt der Artikel auch die Antwort auf das Verhalten des Firefox? Rundungsfehler beim Umrechenen zwischen CSS-Pixeln und Device-Pixeln?  
  
Qapla'

-- 
Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)