关于屏幕尺寸而不是分辨率的媒体查询

Posted 2023-03-06

【中文标题】关于屏幕尺寸而不是分辨率的媒体查询

【英文标题】：Media query about screen size instead of resolution

【发布时间】：2013-10-28 20:18:54

【问题描述】：

是否有在 CSS 媒体查询中使用物理屏幕宽度的解决方法？今天，有些手机的分辨率超过了桌面显示器。但是，手机仍应显示移动布局，而桌面应显示标准布局。

所以我不能像下面的示例那样依赖基于像素的查询。相反，我需要一个物理测量值，或者一个关于像素密度的测量值。

@media screen and (min-width: 700px) 

由于我没有通过研究找到这样的测量值，它们可能不存在。无论如何，这个问题通常是如何解决的？

【问题讨论】：

查看bjango.com/articles/min-device-pixel-ratio 了解像素密度方法。你会明白的。

可以使用最小分辨率和设备像素比。处理视网膜显示：css-tricks.com/snippets/css/retina-display-media-query

【参考方案1】：

@media screen and (min-width: 700px) 和 window.innerWidth 等媒体查询使用 css 像素。起初，当移动设备真的是 320px 时，css 像素和真实像素是一样的。现在，具有 800px 和相同尺寸的新设备仍报告 320 css 像素。

这对于设计向后兼容的网站非常有用。基本上@media screen and (max-width: 480px) 可以翻译为：小，考虑到眼睛到屏幕的距离和屏幕尺寸（以米为单位，而不是像素）。

因此，css 像素比其他任何东西都更能作为参考度量。

真实像素、dpi、屏幕类型和方向可以或将可用于媒体查询。但使用这些可能是一种反模式。

也不要忘记viewport 元标记。

【参考方案2】：

今天似乎没有可靠的方法来检查这个。

我有同样的“需求”，当像素不如观看距离和屏幕尺寸相结合重要时，就会出现这种需求。

例如：您可以拥有一台与大型电视机具有相同分辨率的 iPad，但您可能希望在这两种设备上呈现截然不同的内容，因为电视机可能位于相当远的地方（超过伸手可及的 iPad）。

有一个电视机的@media 查询可能会有所帮助，但目前对它的支持可能非常稀少。我的 Google Chrome v32 支持它。在这里测试你的：http://cssmediaqueries.com/

【参考方案3】：

嗯，对于初学者来说，CSS 像素是an angular measurement，并且在设备之间进行了适当的标准化。不完全是，但在大多数情况下足以让这不是问题。

我个人在ems 中测量媒体查询，以便它们与我的字体大小相关。我的意思是，人们通常会访问一个网站来阅读网站上的文字，所以只要每行的字数合理，我就满意了。

您真的不应该使用物理（设备）宽度进行测量，因为人们可能会让 UI 元素占用空间（或者根本不全屏运行他们的浏览器）。

【讨论】：

好的，我的问题是，我想根据渲染网页区域的物理大小设置断点。

我不确定我是否理解这里的问题。您可以在mm、inches 或其他中指定媒体查询，但它们不是as absolute as one could wish。您不应该过多考虑设备，只需专注于使您的内容（文本）可从任何类型的设备访问（可读）。 em 中的媒体查询就是这样做的。 :-)

但我构建游戏.. 里面的文字很少