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使它只包括风格之一床单。