<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" />
答案 0 :(得分：1)
如果您认为第一个附带的样式表中的一般规则不适用：那是由于您在第一行中使用了min-device-width。删除该内容，例如：
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1500px)" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />
这样，将加载第一个样式表，之后，第二个样式表中的规则将覆盖您第一个样式表中具有相同选择器的那些规则。
在您的版本中，只有第二个样式表将适用于较小的设备，而没有第一个样式表...
另外，请考虑是否要真正使用max- device -width，或者仅使用max-width。由于大多数现代设备将像素密度提高了一倍（或更多），因此带有max-device-width: 480px的媒体查询在大多数情况下仅适用于尺寸小于240像素“ CSS像素”（已不复存在）的设备。
答案 1 :(得分：0)
我解决了trhis的问题 max-device-width是指您的设备分辨率，而不是窗口宽度大小，即min-width或max-width，请参见此处以更好地理解。
设备宽度用于您要定位移动设备，而不是桌面小型调整大小的窗口。
因此，如果您希望将mobile.css用于屏幕分辨率宽度小于481px的移动设备，并且还希望将桌面浏览器窗口的大小调整为小于481px，请替换：
（最大设备宽度：480px） 用于：
（最大宽度：480像素） 在您的mobile.css媒体查询规则中。