代码之家 › 专栏 › 技术社区 › Maz

如何使自定义CSS光标与视网膜兼容?

mouse-cursor retina-display css

Maz · 技术社区 · 12 年前

我想知道如何在视网膜显示器上的网络应用程序中使用自定义光标。我知道,通常情况下,由于比例因素,图像将以正常大小的两倍显示,为了使您的网站与视网膜显示器兼容,您必须拍摄一张2倍比例的图像,并将其浏览器内渲染宽度和高度设置为实际尺寸的一半。由于光标没有大小属性(据我所知),我如何确保光标以尽可能高的保真度渲染?

谢谢

1 回复 | 直到 12 年前

-4

Oleg 12 年前

我很喜欢提出的通用解决方案 here ,尤其是作者记得要针对所有可以在带有Retina Display的Macbook Pro上运行的浏览器。

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    /*your hi-res cursor styling*/
}

我很好奇,当在同一硬件上运行时(使用Bootcamp或Parallels等),这是否能在Windows中正常工作

推荐文章

ffxsam · 视网膜-设备像素比率和图像大小之间的相关性?

9 年前

AndrewShmig · 我们需要创建非视网膜图像吗?

11 年前

Roman Bekkiev · FF“响应式设计视图”和视网膜

11 年前

Drux · 为什么iOS自动布局会导致Retina之前的显示器出现明显的舍入错误(包括单元测试)

11 年前

Jazzmanouch · b2棱镜关节位置与地面不匹配

12 年前