Question

我有一个包装器div，它包装了我的页面的标题，如下所示：

<div id="wrapper">
  <div id="centered_slideshow">
     // Slideshow here, covering approx 75% of screen width...
  </div>
</div>

#wrapper{
    width:100%;
    min-width:980px;
    background:#000 url(../graphics/header_wrapper_bgr_left.jpg) no-repeat bottom left;
}
#centered_slideshow{
        margin:0 auto; //for centering the div inside the wrapper
}

现在整个网站在移动设备上都很棒，除了这一个背景图片。移动设备具有明显更小的宽度。这导致背景图像“移动”到移动屏幕的左下方，并且由于幻灯片放映在屏幕的中间，因此它部分地与幻灯片放映重叠。即背景图像与幻灯片重叠，这是我的问题。

如何在移动设备中显示图像，alt使得当屏幕宽度变小时背景图像根本不移动（如在移动设备中）？

如果您需要更多输入，请告诉我。

Answer 1

您可以使用媒体查询来检查屏幕大小，然后使用不同的背景为移动设备提供服务。像

这样的东西

@media screen and (max-width: 480px) {
    #wrapper{
        width:100%;
        background-image:none;
    }
}

有关媒体查询的更多信息，请访问：http://www.w3.org/TR/css3-mediaqueries/

您也可以使用jQuery来执行此操作，但只有在您已经在网站上使用jQuery时我才会建议这样做。（最好不要在脚本下载过多的情况下使用户超载。）在这种情况下，

if (screen.width<480){
    $('#wrapper').css('background-image','none');
}

背景图像在iphone和移动设备上移动并重叠，需要解决方法

1 个答案: