媒体查询设备宽度或分辨率答案

【问题标题】：media query device width or resolution媒体查询设备宽度或分辨率
【发布时间】：2014-04-06 15:31:01
【问题描述】：

我的媒体查询有问题。

我的目标是（开始）一个样式表的最大设备宽度为 1024 像素，另一个样式表的最小设备宽度为 1025 像素，然后使用百分比，以便内容适应浏览器的大小调整。

但是，我的 20 英寸大屏幕使用与 11.6 英寸屏幕相同的样式表，我认为这是由于分辨率问题，因为我的 15 英寸屏幕旧计算机使用另一个更小的样式表？

因为我在我的主要内容区域使用百分比，所以这个区域在我的大屏幕上看起来很好，因为显然我不希望内容散布在我的 20 英寸屏幕上，但在我的 11.6 英寸小屏幕上它看起来很小。

我做错了什么？是否有针对设备的最佳实践以及使用百分比是否可行？我喜欢我的内容一点一点地适应浏览器调整大小的方式。

我对媒体 wueries 的工作方式有相当的了解，但我希望有一种方法可以用于大多数网站，无论是使用设备宽度、宽度还是分辨率等，因为我现在发现我需要继续添加样式表。

提前致谢

【问题讨论】：

我会使用min-width / max-width 而不是min-device-width / max-device-width。如果阅读器的屏幕分辨率很大，max-device-width 将返回他的总屏幕分辨率的宽度，而不是他实际浏览器窗口的宽度。
或者你可以同时使用。 @media screen and (min-width:Xpx),screen and (min-device-width:Xpx) {}
要考虑的另一件事是，如果用户在浏览器中放大或缩小（ctrl + 或 ctrl -），那么 min-width 和 max-width 值会发生变化（就像屏幕变小或变大）

标签： html css

【解决方案1】：

您的 11.6 英寸屏幕很可能具有高像素密度屏幕 (HiDPI)。这将使它的分辨率几乎等于您的 20 英寸屏幕。因此，它们将具有相同的样式（最大设备宽度/最小设备宽度）尝试根据 DPI 或像素比率来定位设备。 请参阅本指南了解更多信息 (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)。

您可能还需要添加视口来调整文本大小。 <head> 标记的推荐语句是 (http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972)：

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：