css - 使用 CSS sprites 同时仍然支持高密度显示

标签 css css-sprites highdpi

是否可以使用 CSS Sprite 并仍然支持高密度(例如,视网膜)显示器?这可能意味着将普通分辨率和双分辨率图像打包到一个 Sprite 表中……问题是我将如何指定偏移量?另一种可能的解决方案是以某种方式检测(如何?)屏幕的密度并将一个类应用于 body 。

有人遇到过这个问题吗?任何优雅的解决方案?

最佳答案

您可以使用 min-device-pixel-ratio 媒体查询加载单独的 Sprite 表(并指定单独的偏移量),或在同一 Sprite 表中指定单独的偏移量。

最好为每个密度使用单独的 spritesheet,这样客户端就不需要下载它们无论如何也无法显示的像素。

您可以使用 LESS 或 SASS mixin 指定一次偏移量,然后生成第二个媒体查询规则,使偏移量加倍。

关于css - 使用 CSS sprites 同时仍然支持高密度显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18972097/

相关文章:

javascript - 在悬停时从起点到终点填充 svg

css - 图片库媒体查询

html 和 css 试图在我的方程周围获得一些垂直空间

jquery - jQuery UI 中是否支持 CSS Sprite

html - 知道为什么我的图像不断中断吗? ( Sprite )

.net - 将主显示比例切换到 100% 的命令

JavaFX - 在高 dpi 的 Canvas 上使用矩形绘制时避免模糊

css - Chrome/Firefox 检查显示相同的字体但实际上不是

css - IE9 渲染 sprite hover image 1px off/blurred

c++ - Qt 6.4 中的高 DPI 缩放在 Windows 上无法开箱即用(适用于 Qt 示例)