2

我需要设计一个响应式网站，在调整浏览器窗口大小时也能响应。

我在 head 标签中添加了以下代码：

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

我已经包括了以下样式：

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px) and (max-device-width: 1500px)" href="style.css" /> 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />

但是，当我将浏览器窗口的宽度调整为小于 480 像素时，文档仍然使用 style.css 设置样式，而应该使用 mobile.css 设置样式

我错过了什么？

4

1 回答 1

3

max-device-width指的是您的设备分辨率，而不是窗口宽度大小，min-width或者max-width看这里以获得更好的理解。

device-width当您想要定位移动设备而不是桌面小型调整大小的窗口时使用。

因此，如果您希望mobile.css用于屏幕分辨率宽度小于的移动设备，481px并且还包括桌面浏览器窗口的大小调整为小于481px然后替换：

(max-device-width: 480px)

为了：

(max-width: 480px)

在您的mobile.css媒体查询规则中。

于 2012-11-30T10:26:28.153 回答