html - Sprite 迎合多设备尺寸与单个图像的媒体查询

Question

我们需要构建一个响应式移动网站，涵盖从 300 宽到平板电脑高清的尺寸。

我们正在考虑为所有图标使用一个精灵（总共 12 个图标）以减小图像大小 - 结合媒体查询（每个设备缩小 3 个精灵）。

有没有人对这种方法有任何经验，如果有的话可能会带来我们可能遇到的任何缺点？

我担心较旧的 Android 手机可能会在渲染/缩放大型精灵方面遇到困难？

Answer 1

假设您正在描述三种不同的尺寸，有两种方法可以解决这个问题（我无论如何都尝试过）：

• 构建精灵以包含所有三种图像大小并切换背景位置（使用媒体查询）。
• 以最大尺寸制作一次精灵，并使用 CSS3background-size属性放大/缩小图像。

我个人倾向于选择这种background-size方法（尽管也倾向于将其与第二个版本的 sprite 相结合，其大小是视网膜图像的 2 倍）。

请记住，背景尺寸目前没有完全覆盖，但是您可以使用正常的三个供应商前缀，以及“正常”。例如：

-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;
-o-background-size: 100px 100px;
background-size: 100px 100px;

编号与 CSS 中的其他任何地方相同：宽度，然后是高度。

如果您想将元素的大小缩小一半，您只需切换尺寸：

-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-o-background-size: 50px 50px;
background-size: 50px 50px;

尽管请注意，您还必须使用该视图大小的精灵为每个元素包含新的背景位置。