Question

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

所以我开始想知道在定位高清屏幕时是否仍然使用像素。我的意思是@media only screen and (min-width: 5 billion px)似乎是一件愚蠢的事情。

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

我的目标是针对仅限移动设备的网页定位几乎所有屏幕。纯粹用于实践目的，并亲眼看到可能和合乎逻辑的东西。

我的问题几乎如下：如何在全面的解决方案中将“高清屏幕”与“正常”屏幕区分开来，我可以为“未来”构建HD和普通def屏幕的例外情况。 / p>

Answer 1

嗯，160 DPI是屏幕PX密度的基线 - 因为它是设备PX的1：1屏幕PX。 Retina显示屏为设备PX的2：1屏幕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 ) {}

Answer 2

我假设您正在使用通过元视口（或非WindowsPhone8 IE10，@ ms-viewport）设置浏览器缩放的标准做法width = device-width。

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

因此，如果您对物理屏幕尺寸中的这种不准确性感到满意，这些尺寸将与您的宽度/高度“px”媒体查询相匹配，请立即行动。只需确保您将硬件开发人员定义的“css layout px”定义为“物理像素”缩放，几乎可以在每种现代移动设备上以某种形式提供。

注意：也可以依靠一些聪明的javascript从客户那里收集更准确的PPI读数。我目前这样做是为了获得移动和桌面的统一PPI值，这个任务可能会变得混乱（想想桌面“Page Zoom”vs“Viewport Zoom”vs“System Zoom”）考虑到目前所有的非IE浏览器他们的错误跟踪器上有类似的问题，表明移动和桌面之间的严重架构分裂与像素缩放/缩放/比率/无论什么

Answer 3

通常您使用em或%等相对单位。

例如，如果您网页中的所有内容都使用em，则更改正文的font-size会自动缩放每个元素与字体大小成比例。

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

顺便说一下，我怀疑min-width将会是“数十亿像素”。目前，在消费者和大多数专业屏幕（4096x3113）中，重塑不会超过4K。也就是说，我认为你不需要使用十亿像素的媒体查询！

高清屏幕上的媒体查询的PPI或像素或其他内容？

3 个答案: