使用媒体查询的视网膜显示图像分辨率

问题描述

使用媒体查询来检测视网膜显示并指定最大宽度的最佳方法是什么?我可以使用

What is the best way to use media queries to both detect a retina display and also specify max-width?I can detect retina using

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

}

如何将其添加到媒体查询中?我写

How do I add it to the media queries? Do I write

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
 @media screen and ( max-width: 2000px){
     .holer{
         background:url("[email protected]");
       }
  }
}

或者有没有更好的方法来更改视网膜显示的图像?(将用于屏幕尺寸的媒体查询添加到用于视网膜显示的媒体查询中

Or is there any better method for changing images for retina displays? ( adding media queries for screen size to media queries for retina display)

推荐答案

您可能会根据本文，由CSS技巧提供.我想你已经发现了.另一种选择是使用SVG，但我不会将它们用于背景图像.SVG格式非常适合二维形状和图标，但图标字体的渲染速度更快.

You'd probably cover all retina displays according to this article by CSS-tricks. I guess you already found that out. Another option is to use SVG's, but I wouldn't use them for background images. The SVG format is perfect for two dimensional shapes and icons, altough icon fonts render faster.

关于如何将用于屏幕尺寸的媒体查询添加到用于视网膜显示的媒体查询"这一问题，您发布的代码应该可以正常工作.另一种方法是将第二个子句添加到第一个子句中，如下所示:

As for the question "how to add media queries for screen size to media queries for retina display", the code you posted should work fine. Another way would be to just add the second clause to the first ones, like so:

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and (   min--moz-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and ( max-width: 2000px),
only screen and (        min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and (                min-resolution: 192dpi) and ( max-width: 2000px),
only screen and (                min-resolution: 2dppx) and ( max-width: 2000px) {
    .holer {
        background:url("[email protected]");
    }
}

如果您使用的是SCSS，请按照此处.这样可以节省大量时间，并大大提高了可读性.

If you're using SCSS, create a mixin as explained here. This would save you alot of time and drastically improves readability.

这篇关于使用媒体查询的视网膜显示图像分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！