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
}

响应媒体查询不适用于PC上的浏览器重量大小

2 个答案: