有没有办法阻止绝对定位的div在小屏幕上消失？

Question

我不确定如何解释这个，所以这是一张图片： Window To Small http://vsave.org/my/user_folders/Ian33_159/image.jpg

正如您在图片中看到的那样，随着屏幕缩小，图片移出视图，因为我使用了代码：

    position: absolute;
    left: 50%;
    margin-left: -450px;
    width: 900px;

因为它减去了450px，所以它移动到屏幕左侧，你再也看不到它了。

以下是我的身体标记的代码：

    body {
margin: 0px;
padding: 0px;
min-width:1000px; /* suppose you want minimun width of 1000px */
width: auto !important;  /* Firefox will set width as auto */
width:1000px;             /* As IE ignores !important it will set width as 1000px;*/
    }

如果您需要更多信息，请告诉我。 感谢

Answer 1

在父元素（或min-width）上设置body，这将使窗口具有水平滚动而不是在页面上运行。

请注意min-width是IE 7 +

Answer 2

您可以使用媒体查询来适应较小的屏幕尺寸：

@media screen and (min-width: 900px) {
 #container {
  position: static;
  /* Or */
  width: 450px;
  margin-left: -225px;
}
}