Question

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

我一直在困惑如何有条件地加载视网膜图形。我需要为视网膜设备加载第一组视网膜图形，这些视网膜设备的屏幕足够大，可以用于幻灯片放映，但是如果你在手机上，第一组不应该加载，第二组视网膜图形应该覆盖用于滚动网站的第二组图像。

我用这个用视网膜触发和替换普通图形：

@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应该可以解决问题。

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

1 个答案: