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

Question

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

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

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

}

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

Answer 1

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

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

您真的不应该使用物理(设备)宽度进行测量，因为用户界面元素可能会占用空间(或者根本无法全屏运行浏览器)。