如何输出不同的图像取决于用户的屏幕？ [英] How to output different images depend on user screen?

问题描述

例如，如果我的网站有两套图片，一套是低分辨率，另一套是高分辨率，我将低分辨率显示为1280宽度用户的屏幕尺寸，其他是高分辨率的图像，我该怎么做？
使用javascript？或任何其他方法？您可以使用 / TR / css3-mediaqueries /rel =nofollow> CSS媒体查询。有关媒体查询的更多信息此处。

示例：

  / *此块适用于所有屏幕设备
 * / 
 @media screen {
 .some-content {
 background-image：url（largeimage.jpg）; 
} 
} 
 
 / *此媒体查询仅适用于
a最大宽度为1279px的屏幕设备（例如，<1280）
 * / 
 @media屏幕和（最大宽度：1279px）{
 / *在这些设备上使用`mediumimage.jpg`而不是以上* / 
 .some-content {
 background-image：url（mediumimage.jpg）; 
} 
} 
 
 / *此媒体查询仅适用于
a最大宽度为639px的屏幕设备（例如，<640）
 * / 
 @media屏幕和（最大宽度：639px）{
 / *在这些设备上使用`smallimage.jpg`而不是以上* / 
 .some-content {
 background-image：url（smallimage.jpg）; 
 
 
 $ / code $ / pre 
 
注意上面的降序：首先我们指定对于最大的设备，然后是较小的，然后是较小的，以便后面的查询覆盖较早的设备（因为具有例如1024像素的屏幕的设备将匹配前两条规则）。
 
For example if I have two sets of images for my website, one set is low resolution, 
another set is high resolution, I to show the low res to the screen size like 1280 width users, and the others are high res images, how can I do that?
Using javascript? or any other method ? possible to define in css or html?
解决方案
You can use CSS media queries for that. More about media queries here.

Example:
/* 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);
    }
}
Note the descending order of the above: First we specify for the largest device, then smaller ones, then smaller ones, so that latter queries override earlier ones (since a device with a screen of, say, 1024 pixels will match both of the first two rules).

                        
这篇关于如何输出不同的图像取决于用户的屏幕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！