如何根据用户屏幕输出不同的图像？答案

【问题标题】：How to output different images depend on user screen?如何根据用户屏幕输出不同的图像？
【发布时间】：2012-11-26 10:11:00
【问题描述】：

例如，如果我的网站有两组图像，一组是低分辨率的，另一组是高分辨率，我要向1280宽度用户的屏幕尺寸显示低分辨率，而其他的是高分辨率图像，我该怎么做？使用 javascript？或任何其他方法？可以用css或html定义吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以为此使用CSS media queries。更多关于媒体查询here。

例子：

/* This block applies to all "screen" devices
*/
@media screen {
    .some-content {
        background-image: url(largeimage.jpg);
    }
}

/* This media query applies only to "screen" devices with
   a maximum width of 1279px (e.g., < 1280)
*/
@media screen and (max-width: 1279px) {
    /* Use `mediumimage.jpg` on these devices instead of the above */
    .some-content {
        background-image: url(mediumimage.jpg);
    }
}

/* This media query applies only to "screen" devices with
   a maximum width of 639px (e.g., < 640)
*/
@media screen and (max-width: 639px) {
    /* Use `smallimage.jpg` on these devices instead of the above */
    .some-content {
        background-image: url(smallimage.jpg);
    }
}

请注意上面的降序：首先我们指定最大的设备，然后是较小的设备，然后是较小的设备，以便后面的查询覆盖前面的查询（因为屏幕为 1024 像素的设备将同时匹配这两者前两条规则）。

【讨论】：

@FatDogMark：嗯，成功需要努力，是的。短版是some_selector { /* use large image */} @media all and (max-width: 1279px) { same_selector { /* use smaller image */} }
所以 css 的语法是 @media all and (max-width: 1279px) ，对于 html 是 media='all and (max-width: 1279px)' ？好的
@FatDogMark：对不起，我不明白这个问题。 @media all and (max-width: 1279px) 将对所有媒体类型（例如，screen 和 print）应用以下块，但仅适用于 1,279 像素宽或更小的设备。因此，通过提供没有媒体查询的大图像，然后使用媒体查询在 1,279 像素宽或更小（例如，
虽然ipad是小屏，但是如果我用max-width:1279显示低分辨率怎么设置高分辨率呢？我只希望 ipad 在小屏幕上显示高分辨率
@FatDogMark：我不知道，我从来没有为 iPad 专门设计过。可能值得在这里问这个具体问题，我敢肯定有几个人有。我似乎记得 iPad 是正确的 PITA，因为它主动向浏览器谎报其屏幕尺寸和分辨率... :-)

【解决方案2】：

你可以用类似的东西来设计它身体{宽度：100%；高度：100%；位置：相对；}

您将面临浏览器兼容性问题。

在你的 css 中定义它，你可以拥有任何你想要的类。我已经为我的网站完成了它，您可以使用相同的图像。

【讨论】：