是否有在 CSS 媒体查询中使用物理屏幕宽度的解决方法？今天，有些手机的分辨率超过了桌面显示器。但是，手机仍应显示移动布局，而桌面应显示标准布局。
所以我不能像下面的例子那样依赖基于像素的查询。相反，我需要一个物理测量，或者一个关于像素密度的测量。
@media screen and (min-width: 700px) {
}
由于我没有通过我的研究找到这样的测量值，它们可能不存在。无论如何，通常如何解决这个问题？
问问题
6275 次
3 回答
8
好吧，对于初学者来说，CSS 像素是一种角度测量，并且在设备之间进行了适当的标准化。不完全是，但在大多数情况下足以让这成为一个非问题。
就我个人而言，我在 s 中测量媒体查询，em以便它们与我的字体大小相关。我的意思是，人们通常会访问一个网站来阅读网站上的文字，所以只要每行的字数合理，我就满意了。
你真的不应该用物理（设备）宽度来测量，因为人们可能有 UI 元素占用空间（或者根本不全屏运行他们的浏览器）。
于 2013-10-20T16:32:24.377 回答
2
今天似乎没有一种可靠的方法来检查这一点。
我有同样的“需要”，当像素不如观看距离和屏幕尺寸重要时就会出现。
例如：您可以拥有一台与大型电视机具有相同分辨率的 iPad，但您可能希望在这两种设备上呈现非常不同的内容，因为电视可能位于相当远的地方（超过相当于 iPad 的手臂的长度）。
有一个电视机的@media 查询可能会有所帮助，但现在对它的支持可能非常稀少。我的 Google Chrome v32 支持它。在这里测试你的：http: //cssmediaqueries.com/
于 2014-01-22T21:52:08.930 回答
1
媒体查询喜欢@media screen and (min-width: 700px)并window.innerWidth使用 css 像素。起初，当移动设备真的是 320px 时，css 像素和真实像素是一样的。现在，具有 800 像素和相同尺寸的新设备仍报告 320 像素。
这对于设计向后兼容的网站非常有用。基本上@media screen and (max-width: 480px)可以翻译为：小，考虑到眼睛到屏幕的距离和屏幕尺寸（以米为单位而不是像素）。
因此，css 像素比其他任何东西都更能作为参考度量。
真实像素、dpi、屏幕类型和方向可以或将可用于媒体查询。但使用这些可能是一种反模式。
也不要忘记viewport元标记。
于 2017-12-04T15:58:54.170 回答