Question

我正在开发一个壁纸网站，为此我有每个壁纸的3个版本，我想使用这三个中的一个作为主页。例如，网站的主页列出10个壁纸，对于小屏幕设备，我想使用300x300图像，对于中等屏幕尺寸的设备，我想要使用600x600，对于更大屏幕尺寸的设备，我想使用1000x1000

在加载主页的html之前是否有任何有效且SEO友好的方法来确定屏幕大小，然后根据屏幕大小设置图像src？我不想在加载HTML后使用javascript更新/设置图像src

Answer 1

不要更改您的HTML。只需使用CSS和媒体查询来设置背景图像。

/* Small screens & default */
.homepage .wallpaper {
    width: 300px;
    background-image: url(wallpaper-300.jpg);
}

/* Medium sized screens */
@media all and (min-width: 600px) {
    .homepage .wallpaper {
        width: 600px;
        background-image: url(wallpaper-600.jpg);
    }
}

/* Larger sized screens */
@media all and (min-width: 1100px) {
    .homepage .wallpaper {
        width: 1000px;
        background-image: url(wallpaper-1000.jpg);
    }
}

（由于你需要对每张图片进行三次硬编码，这可能不是很多图像的最佳解决方案）

如何根据设备屏幕尺寸设置网站所有图像的图像源

1 个答案: