媒体查询屏幕大小而不是分辨率

Question

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

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

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

}

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

Answer 1

那么,对于初学者来说,CSS像素是一种角度测量,并且在设备之间进行了适当的标准化.不完全,但足以让大多数情况下都不成问题.

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

你真的不应该用物理(设备)宽度进行测量,因为人们可能有UI元素占用空间(或者根本就没有全屏运行他们的浏览器).