0

只是为了测试和学习 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 后更改在其他 Web 版本中也可见（对于 480 像素、540 像素等）。我在 Opera Mobile Emulator 上测试网站（移动版）。我做错了什么？

谢谢

4

1 回答 1

1

你做错的是认为你的样式表选择只包括一个样式表。

您包含的样式表min-width将包含在任何更大的分辨率中，因此，例如，如果我有一个 600 像素宽的屏幕，我将得到small.css、和medium.css，而不仅仅是.large.csswide.csswide.css

（另外，如果我有一个 200 像素宽的屏幕，它根本不会包含任何样式表......）

您需要同时使用这两者min-width并max-width使其仅包含其中一个样式表。

于 2012-04-10T11:51:15.547 回答