使用媒体查询的图标大小答案

【问题标题】：Icon size using media queries使用媒体查询的图标大小
【发布时间】：2013-02-14 23:36:34
【问题描述】：

我正在开发一个在移动和桌面浏览器上运行的应用程序。我正在尝试找到可以修复我的图标大小的解决方案。我希望图标在桌面浏览器上很小，但在移动浏览器上更大。

媒体查询可以检测屏幕密度吗？如果可以，屏幕密度可以决定我的图标大小吗？

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

【问题讨论】：

如果您的图标是图像，那么这个话题已经在 Web 开发博客中活跃了几个月。做起来很复杂。如果您使用的是图标字体，那很容易。
我使用的是 .PNG 图片

标签： javascript css media-queries

【解决方案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 中还有大量信息。

【讨论】：

注意这种类型的查询只能在 webkit 浏览器上工作，所以它不能工作 Opera mini、Windows phone 上的 IE，或 firefox mobile、桌面 firefox，或桌面 IE 或桌面 Opera（然而，Opera即将迁移到 webkit）
@ryan Opera 和 Firefox 有前缀变体。

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

【讨论】：