CSS3 - 手機網站和媒體查詢

Question

只是爲了測試和學習css3我想創建小型移動網站。但現在我在定位樣式表時遇到了小問題。我做它以這樣一種方式：

<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" /> 

後，可惜的是改變xsmall.css變化是其他網絡的版本也可見（所以對於480像素，540像素等）。我在Opera Mobile Emulator上測試網站（移動版）。我做錯了什麼？

感謝

Answer 1

你在做什麼錯誤是，認爲您的樣式選擇只包括樣式表之一。

，你包括與min-width一個樣式表將包含任何分辨率較大，所以如果我例如有一個600px的寬屏幕，我會得到small.css，medium.css，large.css和wide.css，不僅wide.css。

（另外，如果我有一個200像素寬屏幕，它不會包含任何樣式表在所有...）

你會需要同時使用min-width和max-width使它只包括風格之一牀單。