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之后不幸的是，在其他网络版本中也可以看到更改（因此对于480px，540像素等）。我在Opera Mobile Emulator上测试网站（移动版）。我做错了什么？

感谢

Answer 1

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

任何较大的分辨率都会包含min-width所包含的样式表，因此，如果我的宽屏幕为600px，我将获得small.css，medium.css ，large.css和wide.css，不仅wide.css。

（另外，如果我有200px宽屏幕，它根本不包括任何样式表......）

您需要同时使用min-width和max-width才能使其仅包含其中一个样式表。

CSS3 - 移动网站和媒体查询

1 个答案: