我需要设计一个响应的网站,也响应时,浏览器窗口的大小。
我在头标签中添加了以下代码:

 <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对其进行样式设置
我错过了什么?

最佳答案

max-device-width指的是设备分辨率,而不是窗口宽度大小,即min-widthmax-width请参见here以获得更好的理解。
device-width用于目标移动设备,而不是桌面小尺寸窗口。
因此,如果您希望将mobile.css用于屏幕分辨率宽度小于481px的移动设备,并且还包括调整为小于481px的桌面浏览器窗口,请替换:

(max-device-width: 480px)

致:
(max-width: 480px)

mobile.css媒体查询规则中。

10-05 20:14
查看更多