CSS3 - mobile Website und Medienabfragen

Question

Nur für Tests und Lernen css3 ich versuche, kleine mobile Website zu erstellen. Aber jetzt habe ich ein kleines Problem mit dem Targeting von Stylesheets. Ich mache es in einer solchen Art und Weise:

<link rel="stylesheet" media="only screen and (max-width: 180px)" href="xsmall.css" /> 
<link rel="stylesheet" media="only screen and (min-width: 240px)" href="small.css" /> 
<link rel="stylesheet" media="only screen and (min-width: 320px)" href="medium.css" /> 
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="large.css" /> 
<link rel="stylesheet" media="only screen and (min-width: 540px)" href="wide.css" /> 

Unfortunatelly nach xsmall.css Wechsel Wechsel in anderen Web-Versionen auch sichtbar ist (so für 480px, 540 px usw.). Ich teste Webseiten (mobile) auf Opera Mobile Emulator. Was mache ich falsch?

dank

Answer 1

Was Sie tun falsch ist, dass Ihre Sheet Auswahl einer der Stylesheets nur zu denken, enthält.

Ein Stylesheet, das Sie mit min-width umfassen wird für jede Auflösung aufgenommen werden, die größer ist, also wenn ich zum Beispiel einen 600px breiten Bildschirm hat, werde ich small.css, medium.css, large.css und wide.css, nicht nur wide.css bekommen.

(Auch wenn ich einen 200px breiten Bildschirm haben, wäre es kein Stylesheet enthalten überhaupt ...)

Sie benötigen würden beide min-width und max-width verwenden, um es nur eine der Stil gehören zu machen Blätter.