视网膜显示屏,高分辨率背景图像
Posted
技术标签:
【中文标题】视网膜显示屏,高分辨率背景图像【英文标题】:Retina displays, high-res background images 【发布时间】:2013-04-15 18:58:47 【问题描述】:这听起来像是一个愚蠢的问题。
如果我将此 CSS sn-p 用于常规显示(其中 box-bg.png
是 200 像素 x 200 像素);
.box
background:url('images/box-bg.png') no-repeat top left;
width:200px;
height:200px
如果我使用这样的媒体查询来定位视网膜显示器(@2x 图像是高分辨率版本);
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi)
.boxbackground:url('images/box-bg@2x.png') no-repeat top left;
我是否需要将.box
div 的大小加倍为 400 x 400 像素以匹配新的高分辨率背景图片?
【问题讨论】:
images/box-bg@2x.png的尺寸是多少?请把这个问题放在绝对清楚的地方。 【参考方案1】:我是否需要将 .box div 的大小加倍为 400px 乘以 400px 到 匹配新的高分辨率背景图片
否,但您确实需要设置 background-size
属性以匹配原始尺寸:
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi)
.box
background:url('images/box-bg@2x.png') no-repeat top left;
background-size: 200px 200px;
编辑
为了给这个答案添加更多内容,这是我倾向于使用的视网膜检测查询:
@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)
- Source
注意。这个min--moz-device-pixel-ratio:
不是错字。这是 Firefox 某些版本中的一个有据可查的错误,应该这样编写以支持旧版本(Firefox 16 之前)。
- Source
正如下面 cmets 中提到的 @LiamNewmarch,您可以在简写的 background
声明中包含 background-size
,如下所示:
.box
background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px;
但是,我个人不建议使用速记形式,因为它在 ios
【讨论】:
对于设置整页背景的背景大小有什么建议吗?我知道 x 组件的宽度,但是 y 呢? @theOther 在这种情况下,您可能希望使用background-size: cover;
。这将保持纵横比,同时用图像“覆盖”整个背景。
如果您愿意,可以将background-size
属性集成到background
中,如下所示:background: url('images/box-bg@2x.png') no-repeat top left / 200px 200px
。请注意,不支持background-size
的浏览器将忽略此规则。
@LiamNewmarch 我不建议我自己作为 android 似乎不理解速记形式
@3rror404 好吧,很公平。谢谢!【参考方案2】:
这是一个解决方案,还包括 High(er)DPI (MDPI) 设备> ~ 每英寸 160 点 像 相当多的非 iOS 设备(fe :Google Nexus 7 2012):
.box
background: url( 'img/box-bg.png' ) no-repeat top left;
width: 200px;
height: 200px;
@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
only screen and ( min--moz-device-pixel-ratio: 1.3 ),
only screen and ( -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
only screen and ( min-device-pixel-ratio: 1.3 ),
only screen and ( min-resolution: 124.8dpi ),
only screen and ( min-resolution: 1.3dppx )
.box
background: url( 'img/box-bg@2x.png' ) no-repeat top left / 200px 200px;
正如@3rror404 在收到来自 cmets 的反馈后在他的编辑中包含的那样,Webkit/iPhone 之外还有一个世界。到目前为止,大多数解决方案都困扰着我的一件事,例如上面在 CSS-Tricks 引用的源代码,那就是没有完全考虑到这一点。original source 已经走得更远了。
例如,Nexus 7 (2012) 屏幕是一个 TVDPI 屏幕,带有奇怪的 device-pixel-ratio
of 1.325
。当以正常分辨率加载图像时,它们通过插值放大,因此变得模糊。对我来说,在媒体查询中应用此规则以包括那些成功获得最佳客户反馈的设备。
【讨论】:
每个维度的 2x 图像具有正好 4x 的像素(例如,理论上可以预期为 4x 大小),而 1.325 * 1.325 仅支持增加 1.755625 像素。我认为使用 1.325dppi 时,图像的质量会有所损失,但是如果你使用 HiDPI,那么客户端将只需要等待更长时间来加载页面,调整图像大小的功耗会更高(而且 Nexus 7 表相当以随机重启而闻名),并消耗更多带宽。所以,我建议坚持@2x
只提供给 2dppx
+ 客户。【参考方案3】:
如果您打算在视网膜和非视网膜屏幕上使用相同的图像,那么这就是解决方案。假设您有一张200x200
的图像,顶行有两个图标,底行有两个图标。所以,是四个象限。
.sprite-of-icons
background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat;
background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */
.sp-logo-1 background-position: 0 0;
/* Reduce positioning of the icons down to 50% rather using -50px */
.sp-logo-2 background-position: -25px 0
.sp-logo-3 background-position: 0 -25px
.sp-logo-3 background-position: -25px -25px
将精灵图标缩放和定位到实际值的50%,可以得到预期的结果。
Ryan Benhase 提供的另一个方便的 SCSS 混合解决方案。
/****************************
HIGH PPI DISPLAY BACKGROUNDS
*****************************/
@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat)
$at1x_path: "#$path.#$ext";
$at2x_path: "#$path@2x.#$ext";
background-image: url("#$at1x_path");
background-size: $w $h;
background-position: $pos;
background-repeat: $repeat;
@media all and (-webkit-min-device-pixel-ratio : 1.5),
all and (-o-min-device-pixel-ratio: 3/2),
all and (min--moz-device-pixel-ratio: 1.5),
all and (min-device-pixel-ratio: 1.5)
background-image: url("#$at2x_path");
div.background
@include background-2x( 'path/to/image', 'jpg', 100px, 100px, center center, repeat-x );
更多关于上述 mixin 的信息READ HERE。
【讨论】:
【参考方案4】:你可以使用 image-set()。这个 CSS 函数目前 has limited support,但它确实有效。 More about it on MND web docs,但这里是它的工作原理示例:
.box
background-image: -webkit-image-set(
url('images/box-bg.png') 1x,
url('images/box-bg@2x.png') 2x); /* Temporary fallback for Chrome and Safari browsers until they support 'image-set()' better */
background-image: image-set(
url('images/box-bg.png') 1x,
url('images/box-bg@2x.png') 2x);
“1x”和“2x”是这里的分辨率。 '2x' 用于视网膜显示器。
【讨论】:
以上是关于视网膜显示屏,高分辨率背景图像的主要内容,如果未能解决你的问题,请参考以下文章