我需要设计一个响应式网站，在调整浏览器窗口大小时也能做出响应。
我在 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 进行样式设置
我错过了什么？
最佳答案
max-device-width指的是你的设备分辨率，而不是窗口宽度大小，即min-width或max-width请参阅here为了更好地理解。
device-width 用于当您想要定位移动设备而不是桌面小型调整大小的窗口时。
因此，如果您希望您的 mobile.css 用于屏幕分辨率宽度小于 481px 的移动设备，并且还包括桌面浏览器窗口大小调整为小于 >481px 然后替换:
(max-device-width: 480px)
对于:
(max-width: 480px)
在您的 mobile.css 媒体查询规则中。
关于html - 响应式样式不适用于窗口大小调整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13643138/