我需要设计一个响应式网站，该网站在调整浏览器窗口大小时也会响应。
我在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设置样式
我缺少什么？
答案 0 :(得分：3)
max-device-width是指您的设备分辨率，而不是窗口宽度尺寸，min-width或max-width请参阅here以便更好地理解。
device-width用于定位移动设备但不是桌面小尺寸窗口。
因此，如果您希望将mobile.css用于屏幕分辨率宽度小于481px的移动设备，并且还要将桌面浏览器的窗口大小调整为小于481px，则替换：
(max-device-width: 480px)
有：
(max-width: 480px)
在您的mobile.css媒体查询规则中。