本文介绍了如何输出不同的图像取决于用户的屏幕?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
例如,如果我的网站有两套图片,一套是低分辨率,另一套是高分辨率,我将低分辨率显示为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).
更多推荐
如何输出不同的图像取决于用户的屏幕?
发布评论