html - PPI 或像素或其他用于高清屏幕上的媒体查询的东西？

Question

我正在对响应式设计进行一些涂鸦(最后，对吧？)并在使用媒体查询时问了自己一个问题:“当我在视网膜屏幕上使用它时会发生什么？”。

所以我开始怀疑在针对高清屏幕时使用像素是否仍然合适。我的意思是 @media only screen and (min-width: 50 billion px) 似乎是一件愚蠢的事情。

所以我想知道最佳实践是什么。 PX 是否在高清屏幕上缩放？或者我应该使用 DPI 或 device-pixel-ratio 还是完全不同的东西？

我的目标是将几乎所有屏幕都定位到仅限移动设备的页面。纯粹出于练习目的，并亲眼看看什么是可能的和合乎逻辑的。

我的问题大致如下:我如何才能在一个全面的解决方案中将高清屏幕与“普通”屏幕分开，在这种解决方案中，我可以为“ future ”构建的高清和普通高清屏幕设置异常(exception)。

Answer 1

好吧，160 DPI 是屏幕 PX 密度的基准 - 因为它是 1:1 屏幕 PX 与设备 PX。视网膜显示屏是 2:1 屏幕 PX 到设备 PX，即 320-330 DPI。

所以，如果您只是想让它适用于 Retina

min-device-pixel-ratio: 2;
min-resolution: 192dpi;

应该没问题。但是，例如，Android 支持一系列具有不同 DPI 的设备；包括 160 DPI(“mdpi”)、240 DPI(“hdpi”)、320 DPI(“xhdpi”)以及介于两者之间。

编辑:在下面添加示例。

@media
only screen and ( -webkit-min-device-pixel-ratio: 1.25 ),
only screen and ( min--moz-device-pixel-ratio: 1.25 ), 
only screen and ( -o-min-device-pixel-ratio: 1.25 / 1 ),
only screen and ( min-device-pixel-ratio: 1.25 ),
only screen and ( min-resolution: 200dpi ),
only screen and ( min-resolution: 1.25dppx ) {}