Question

我正在开发一款可在移动和桌面浏览器上运行的应用。我正在尝试找到一种可以修复我的图标大小的溶剂。我希望桌面浏览器上的图标较小，但移动浏览器图标较大。

媒体查询是否可以检测屏幕密度？如果可以，屏幕视图确定我的图标大小？

另一件事：检测屏幕尺寸或密度是否更好，并根据更好的选择调整图标。

Answer 1

是的，有一个媒体查询可以检测像素密度。这是一个例子：

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Then you would change your background image and background image size here */
}

this article at CSS-Tricks还有更多信息。

Answer 2

是否针对设备尺寸或像素密度的问题很棘手：每次都取决于具体细节，没有什么可说的，你不应该在你的网站中将两者结合起来。您想要涵盖所有内容的媒体查询是：

@media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-resolution: 1.5dppx) {

   /* your retina rules here */

}

...如果您坚持使用PNG而不是SVG图形或图标字体，这可能是最有用的。我建议查看retinafy.me - 这是一个有用的资源（但不是免费的），这是代码的来源。

使用媒体查询的图标大小

2 个答案: