css - 遗留媒体查询和设备像素比

Question

标准媒体查询，例如:

@media only screen and (min-width: 0px) and (max-width: 820px) {}

在视网膜显示屏的设备上工作？

我读过很多这方面的文章，但大多数都是关于指定视网膜显示 css，而不是为 96 dpi(原始大小)开发的标准媒体查询在具有 300 dpi(视网膜显示)的设备上的外观。

我正在寻找的主要保证是:除了没有充分利用设备提供的质量之外，如果是 96dpi 屏幕或 300dpi 屏幕，布局看起来是否相同？

非常感谢您的帮助!

Answer 1

CSS 像素不是硬件像素。这ARTICLE解释差异。

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)

没有提及像素密度，它将 CSS 样式定位到任何 iPad，无论是否有 Retina 显示屏，因为它指的是 CSS 像素，并且在这些术语中两者是相同的。