css - 根据屏幕尺寸加载各种视网膜图形

Question

我的设置是我有一个网站的几个版本。在较大的屏幕上有一个幻灯片放映，而在手机和其他较小的屏幕上只有一个滚动浏览的网站。这两个版本的站点加载不同的图形。

我一直对如何有条件地加载 Retina 图形感到困惑。我需要为屏幕足够大以播放幻灯片的视网膜设备加载第一组视网膜图形，但如果你使用的是手机，则不应加载第一组，第二组视网膜图形应覆盖用于滚动网站的第二组图像。

我正在使用它来触发普通图形并将其替换为视网膜:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

这是我的媒体查询的开头，并替换了桌面站点的图像。然后我有几个部分专门用于调整布局:

@media all and (min-width: 1024px) and (max-width: 1099px){

@media all and (min-width: 768px) and (max-width: 1023px) {

@media all and (max-width: 767px) {
// This query is for the small phone sized layout.

@media all and (max-width: 767px) and ((-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)) {

最后一个查询是我尝试仅为电话站点交换视网膜图像。这行不通，而且我尝试过的任何安排都没有奏效。

想法？

谢谢

Answer 1

我建议为此 e.G. 使用 jQuery 插件。 retina.js 或 response.js 如果你也想根据屏幕分辨率提供不同的图像。

通过这种方式，您只需上传标准分辨率的图像，对于视网膜显示器，文件扩展名前带有 @2x。 (retina.js，response.js 更强大，但需要你做更多的工作)

此外，我认为您需要使用不同的媒体查询来解决 iphone 4 问题。

-webkit-min-device-pixel-ratio: 1,5 应该可以解决问题。