37

我对媒体查询的世界非常陌生，很明显，除了它们明显的定位能力之外，我在宽度和设备宽度之间的差异方面缺少一些基本的东西。

我想针对具有相同断点的常规计算机和设备，所以我只是将所有最小和最大宽度查询复制到最小设备和最大设备宽度查询。无论出于何种原因，当我添加 -device 对应项时，普通计算机对我的 CSS 的解释非常不同，我不确定我做错了什么。

你可以在这里看到效果（这是应该的样子）

在这里（在我的查询中添加了 -device-width 之后，我的 CSS 在最小宽度处被搞砸了——即使浏览器宽度小于被调用的宽度，也会看到更大的分辨率）。

这是我的 CSS 链接——我的语法有问题吗？：

<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css">
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css">
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css">


<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css">
<link rel="stylesheet" media="only screen and (min-width: 1200px) and (max-width: 1299px), only screen and (min-device-width: 1200px) and (max-device-width: 1299px)" href="1200.css">
<link rel="stylesheet" media="only screen and (min-width: 1300px), only screen and (min-device-width: 1300px)" href="1300.css">
4

2 回答 2

93

设备宽度是指显示器的分辨率（例如，1024 来自 1024x768），而宽度是指浏览器本身的宽度（如果浏览器未最大化，它将与分辨率不同）。如果您的分辨率大到足以让您进入一个断点，但浏览器的宽度小到足以让您进入另一个断点，那么您最终会得到两者的奇怪组合。

除非您有正当理由根据分辨率而不是视口大小来限制样式表，否则只需使用min-width/max-width并避免min-device-width/ max-device-width。

于 2013-03-07T16:34:19.627 回答
7

device-width在媒体查询级别 4 中已弃用。有关更多详细信息，请参阅此处的 MDN 文档。

已弃用：不再推荐使用此功能。尽管某些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请注意，此功能可能随时停止工作。

因此，width应该height使用特征来分别考虑视口的宽度和高度。

PS 这些是范围特征，它们可以加上前缀min-或max-表示“最小条件”或“最大条件”约束。参考这里。

于 2020-11-09T19:09:06.473 回答