问题描述
这可能听起来像一个愚蠢的问题。
This might sound like a silly question.
如果我使用这个CSS片段为常规显示(其中 box-bg.png
is 200px by 200px);
If I use this CSS snippet for regular displays (Where box-bg.png
is 200px by 200px);
.box{
background:url('images/box-bg.png') no-repeat top left;
width:200px;
height:200px
}
到目标视网膜显示器(@ 2x图像是高分辨率版本);
and if I use a media query like this to target retina displays (With the @2x image being the high-res version);
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.box{background:url('images/[email protected]') no-repeat top left;}
}
我需要将 .box
div的大小加倍到400px乘400px匹配新的高分辨率背景图片?
Do I need to double the size of the .box
div to 400px by 400px to match the new high res background image?
推荐答案
不,但您需要设置 -size
属性以匹配原始维度:
No, but you do need to set the background-size
property to match the original dimensions:
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.box{
background:url('images/[email protected]') no-repeat top left;
background-size: 200px 200px;
}
}
EDIT
要为此答案添加更多内容,以下是我常用的视网膜检测查询:
To add a little more to this answer, here is the retina detection query I tend to use:
@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) {
}
注意。这个 min - moz-device-pixel-ratio:
不是拼写错误。在某些版本的Firefox中,这是一个很好记录的错误,应该这样写,以支持旧版本(在Firefox 16之前)。
NB. This min--moz-device-pixel-ratio:
is not a typo. It is a well documented bug in certain versions of Firefox and should be written like this in order to support older versions (prior to Firefox 16).- Source
正如@LiamNewmarch在下面的注释中提到的,您可以包括 background-size
在您的简写背景
声明如下:
As @LiamNewmarch mentioned in the comments below, you can include the background-size
in your shorthand background
declaration like so:
.box{
background:url('images/[email protected]') no-repeat top left / 200px 200px;
}
但是,我个人不建议使用速记形式,因为它不支持在iOS< = 6或Android中,使其在大多数情况下不可靠。
However, I personally would not advise using the shorthand form as it is not supported in iOS <= 6 or Android making it unreliable in most situations.
这篇关于视网膜显示,高分辨率背景图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!