Css 根据屏幕大小加载各种视网膜图形集

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

我一直在思考如何有条件地加载视网膜图形。我需要为屏幕大到足以播放幻灯片的视网膜设备加载第一组视网膜图形，但如果您在手机上，则不应加载第一组，第二组视网膜图形应覆盖用于滚动浏览站点的第二组图像

我用它来触发并用视网膜替换正常图形：

@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)) {

最后一个查询是我尝试只为手机站点交换视网膜图像。这不起作用，我尝试过的任何安排都不起作用

想法

---

谢谢

如果您也想根据屏幕分辨率提供不同的图像，我建议使用jQuery插件，例如retina.js或response.js

这样，您只需上传标准分辨率的图像，对于视网膜显示器，在文件扩展名之前使用@2x。（retina.js、response.js功能强大得多，但需要您做更多工作）

另外，我认为您需要用不同的媒体查询来解决iPhone4

-webkit最小设备像素比：1,5应该可以