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

Answer 2

您可以直接在css中添加媒体查询。然后，您可以根据要在不同屏幕尺寸下更改样式的元素进行更改。

你可以这样做：

 @media all and (min-width: 1500px) and (min-height: 701px) {
  // Add the styling for the elements you want to respond to the screen change
 }

希望有所帮助！

高度或宽度媒体查询不起作用

2 个答案: