6

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

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

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

我的目标是针对仅移动页面的几乎所有屏幕。纯粹出于实践目的，并亲眼看看什么是可能的和合乎逻辑的。

我的问题大致如下：除了“普通”屏幕之外，我如何在一个全面的解决方案中定位高清屏幕，我可以为“未来”构建的高清和普通高清屏幕例外。

4

3 回答 3

4

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

所以，如果你只是想让它适用于 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 ) {}
于 2013-03-18T08:17:57.727 回答
2

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

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

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

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

于 2013-03-18T08:51:41.457 回答
1

通常您使用相对单位，例如emor %。

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

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

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

于 2013-03-18T08:17:00.590 回答