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

现在样式表取决于视口的宽度，而不是设备的宽度。据推测，移动设备上视口的宽度与设备宽度相同，因此这会一石二鸟。

Answer 2

如果您想将所有 CSS 代码放在一个文件中：

@media (min-width: 501px)  {
  //put your desktop styles here
}

@media (max-width: 500px) {
  //put your phone design here
}