高清屏幕上的PPI或像素或其他媒体图像？

Question

我正在做一些响应式设计的涂鸦(终于，对吧？)在使用媒体查询时，我问了自己一个问题：“当我在视网膜屏幕上使用这个时会发生什么？”

所以我开始想，当瞄准高清屏幕时，使用像素是否仍然合适。我的意思是@media only screen and (min-width: 5 billion px)看起来是件很愚蠢的事情。

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

我的目标是将几乎所有的屏幕都定位为一个仅限移动设备的页面。纯粹是为了实践的目的，我自己看看什么是可能的和合乎逻辑的。

我的问题大致如下:在一个全面的解决方案中，我如何才能将高清屏幕和普通高清屏幕排除在外，为“未来”而打造的高清屏幕和普通高清屏幕都可以例外。

Answer 1

通常使用相对单位，如em或%。

例如，如果页面中的所有内容都使用em，则更改正文的font-size将根据字体大小自动缩放每个元素。

换句话说:您应该编写用于分辨率范围的媒体查询，并根据屏幕宽度调整最顶部的父字体大小(例如文档正文)，其余样式应该在这些媒体查询之外，因为字体大小的简单更改将自动缩放整个页面，因为font-size已更改。

顺便说一句，我怀疑min-width永远不会达到“数十亿像素”。目前，在消费者和大多数专业屏幕(4096x3113)上，分辨率不会超过4K。也就是说，我不认为你需要使用一个十亿像素的媒体查询！

Answer 2

那么，160 DPI是屏幕PX密度的基线-因为它是屏幕PX与设备PX的1:1。视网膜显示屏与设备PX的比例为2:1，即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 ) {}

Answer 3

我假设您使用的是通过元视图设置浏览器缩放的标准实践(或者对于非WindowsPhone8Width，@ms- viewport ) IE10 = device-width。

在这种情况下，您在宽度/高度媒体查询中引用的CSS "px“单位将非常粗略地对应于160ppi屏幕上的一个物理像素，而不管它是否是高PPI。实际上，它的范围可以从~130ppi到~180ppi。

因此，如果您对与您的宽/高"px“媒体查询匹配的物理屏幕尺寸的不准确性没有意见，请继续。只需确保您启用了硬件开发人员定义的"css布局px“到”物理像素“缩放，几乎每个现代移动设备都可以以这样或那样的形式使用。

注意:也可以依靠一些聪明的javascript从客户那里收集更准确的PPI读数。我目前这样做是为了在移动和桌面上获得一个统一的PPI值，考虑到目前所有非IE浏览器都有类似的问题，表明移动和桌面之间在像素缩放/缩放/比率/其他方面存在严重的架构分裂，这项任务可能会变得混乱(想想桌面“页面缩放”、“视口缩放”和“系统缩放”)