html - 高度或宽度媒体查询不工作

Question

我正尝试在我的 HTML 中设置一些媒体查询，但我遇到了问题。我希望查询查看设备的宽度和高度并使用适当的样式表。据我所知，它是在看高度而不是宽度。这是我的代码:

<link rel="stylesheet" media='screen and (min-width: 1500px), screen and (min-height: 701px)' href="style.css" type="text/css" />
<link rel="stylesheet" media='screen and (min-width: 1000px) and (max-width: 1499px), screen and (min-height: 501px) and (max-height: 700px)' href="tablet.css" type="text/css" />
<link rel='stylesheet' media='screen and (max-width: 999px), screen and (max-height:500px)' href='mobile.css' type='text/css' />

Answer 1

使用这段代码，您可以同时加载两个样式表。它们可以相互干扰，我想这不是您想要的。

例如 width=1200px 和 height=400px 将加载 tablet.css(因为宽度)和 mobile.css(因为高度)。我想这不是你想要的。因此，在构建 CSS 规则时，您必须牢记这些交互作用。

无论如何，大多数响应式网站的 CSS 只是查看宽度来设置适当的规则。

例如，看看 Bootstrap 如何构建其响应式网格系统:http://getbootstrap.com/css/#grid