Html 我的css不适用于我的手机屏幕宽度

我包括了以下风格：

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

---

如果您的意思是第一个包含的styesheet中的一般规则不适用：那是因为您在第一行中使用了

最小设备宽度。删除它，比如：

<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" />



这样将加载第一个样式表，然后第二个样式表中的规则将覆盖第一个样式表中具有相同选择器的规则，这可能是您想要的

在您的版本中，只有第二个样式表适用于较小的设备，而没有第一个

另外，请考虑是否确实要使用最大设备宽度，或者更确切地说，只使用
max width
。最大设备宽度为480px的媒体查询在大多数情况下仅适用于小于240px“CSS像素”（几乎不存在）的设备，因为大多数现代设备的像素密度是现在的两倍（或更多）。
我解决了这个问题
最大设备宽度指的是您的设备分辨率，而不是窗口宽度大小，即最小宽度或最大宽度，请参见此处以了解更多信息

当您希望以移动设备为目标而不是桌面小尺寸窗口时，将使用设备宽度

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

（最大设备宽度：480px）
用于：

（最大宽度：480px）
在您的mobile.css媒体查询规则中。
寻求代码帮助的问题必须包含在问题本身中复制代码所需的最短代码，最好是以最短的格式。请参阅
-设备宽度
与
-宽度
不同<代码>-设备-

并不总是与视口的宽度相匹配，而视口是/可以呈现页面的。当您正在测试的屏幕可能小于480英寸

最大宽度

时，其

最小设备宽度

可能完全不同。可能与

<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" />