html - 响应式媒体查询不适用于 PC 上的浏览​​器调整大小

Question

我正在为我的网站进行响应式设计。

我为此制作了两个单独的 css 文件:

<link rel="stylesheet" type="text/css" media = "screen and (min-device-width: 500px) and (max-device-width: 1500px)" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 500px)" href="mobile.css" />

通过任何手机查看它都可以正常工作。但是当我在我的电脑上调整浏览器大小时，样式表没有改变。

我希望这两件事都发生。样式表在这两种情况下都应该改变——如果设备宽度改变或浏览器窗口大小改变。

Answer 1

而不是 min/max-device-width , 使用 min/max-width .

<link rel="stylesheet" type="text/css" media = "screen and (min-width: 500px) and (max-width: 1500px)" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 500px)" href="mobile.css" />

现在样式表取决于视口(viewport)的宽度，而不是设备的宽度。据推测，移动设备上视口(viewport)的宽度与设备宽度相同，所以这是一箭双雕。