gpt4 book ai didi

css - 替换视网膜就绪设备的背景图像

转载 作者:行者123 更新时间:2023-11-28 17:41:14 25 4
gpt4 key购买 nike

我有一张背景图片,在 windows 操作系统 中看起来不错,但在 支持视网膜的设备 中看起来浑浊且拉伸(stretch)。现在我想在视网膜就绪设备中用高分辨率图像替换背景。实现它的最佳方法是什么? 媒体查询 或使用 javascript 或其他任何方式?

最佳答案

一般可以target high DPI (Dots Per Inch) displays使用这样的媒体查询:

@media only screen and (min-device-pixel-ratio: 2) {
/* high-DPI stuff here */
}

请注意,这将针对任何满足比率要求的内容。

如果您想专门针对 Retina 显示器,则需要添加一些内容以使媒体查询更加具体。以下是 Chris Coyier 的做法:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
/* Retina-specific stuff here */
}

所有这些不同的定位方法都有 different levels of support , 所以了解一些是很有用的。

可能已经有多个设备满足这些条件,因此您可以通过使用额外条件使其更加具体来以另一种方式定位它。

例如,要定位 Retina iPhone 5/5S/5C,您可以使用:

@media (-webkit-min-device-pixel-ratio: 2) and (width:640px) and (orientation:portrait) { 
/* Retina-specific stuff here */
}

@media (-webkit-min-device-pixel-ratio: 2) and (width:1136px) and (orientation:landscape) {
/* Retina-specific stuff here */
}

但一如既往,不建议针对特定设备,这是一项永无止境的工作量。

关于css - 替换视网膜就绪设备的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24074588/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com