我的网站上有一个大横幅(带背景的 div)。我希望拥有更大屏幕的人可以看到它的更高分辨率版本。 我该怎么做?为此我需要 JQuery 吗?
最佳答案
这可以使用 CSS3 媒体查询来实现。媒体查询的工作方式是您可以为不同的屏幕尺寸设置不同的 CSS。
在您的 HTML 中,您有 DIV,HTML 就是这样:
<div id="banner"></div>
您的 CSS 看起来有点像这样:
#banner{
background-image:url('image_low_res.jpg');
}
@media (min-width: 600px){
#banner{
background-image:url('image_med_res.jpg');
}
}
@media (min-width: 1000px){
#banner{
background-image:url('image_high_res.jpg');
}
}
第一行设置为 600 像素及更小的屏幕。中间部分为 600px-1000px 的屏幕设置 CSS,最后几行适用于任何 1000px+ 的屏幕。
这是一个很好的 CSS3 媒体查询教程:http://css-tricks.com/css-media-queries/
关于jquery - 如果超过特定窗口大小,则交换 div 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21498938/