响应式样式不适用于窗口大小调整

Question

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

我加入了头标记以下代码：

<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

我在想什么？

Answer 1

max-device-width是指您的设备分辨率，而不是窗口宽度的大小，即min-width或max-width请参阅here以便更好地理解。

device-width用于当您要定位移动设备但不是桌面小尺寸窗口。

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

(max-device-width: 480px) 

为：

(max-width: 480px) 

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