javascript - 使用媒体查询的图标大小

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 */
}

在 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 - 这是一个有用的资源（但不是免费的），这是代码的来源。