css - 没有 2x 图像大小 hack 的视网膜模糊图标

标签 css icons retina-display blurry

有没有一种方法可以在不使用 2x 大小图像 hack 的情况下修复手机上的 Retina 模糊图标?

我是一名前端开发人员,而设计师无法给我提供双倍大小的网站图标。

所以,我想知道是否有任何方法可以保持原始图标大小并使其在配备 Retina 显示屏的手机上看起来正确。

最佳答案

浏览器会自动放大小像素图像,抗锯齿的质量取决于浏览器的渲染引擎。

如果您不想使用媒体查询 @2 技巧,您可以使用 svg 图标代替,因为矢量图形在每个屏幕分辨率和 ppi 上都非常清晰。

编辑: 正如下面评论中提到的,您可以按照此处所述在浏览器中禁用抗锯齿:Disable antialising when scaling images

但这不会从 16 像素的图形中创建一个尖锐的圆圈,因为像素仍然是方形像素(只是放大了)...

关于css - 没有 2x 图像大小 hack 的视网膜模糊图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36605920/

相关文章:

html - 使用 CSS 倒圆 Angular

css - 向右浮动时父div高度小于子div高度

icons - 如何向 React Native 应用程序添加图标

c++ - QT5添加Icon导致链接器错误

ios - 什么是 iDOT block

wordpress - 响应式网站适用于桌面设备,但不适用于移动设备

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

css - 清除输入框,恢复默认

iphone - 如何在浏览 Cydia 存储库时显示包/应用程序图标

javascript - 更改 Canvas 形状