Question

当我缩小窗口或使用移动设备时，我试图阻止我的网站看起来乱糟糟的。 Twitter几乎是我正在寻找的东西。该网站将向上扩展，但如果您使窗口小于例如600x360，它将停止缩放。

我把一个小小的jsfiddle与我目前所拥有的东西放在一起，但它似乎只对文本起作用（有点）。我希望背景也能停止缩放。

我非常感谢任何帮助：）

编辑：这是我想要完成的.gif文件：https://imgur.com/a/XWwr9（非常滞后）

编辑2：这是我忘了的JSfiddle ..：https://jsfiddle.net/t7ddhtLx/1/

CSS
body {
  background-image:         url("https://pbs.twimg.com/media/DPXJDjmUMAA2oE3.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
      background-size: cover;
  background-color: #cccccc;
  margin-bottom: 100px;
  min-width: 360px;
  min-width: 600px;
  max-width: 1800px;
  max-height: 720px;
}

HTML

<body>
 <center>
  <h1>
   hellooo!
  </h1>
 </center>
</body>

Answer 1

你需要将background-position设置在左侧，因为它的中心总是会让浏览器尝试......好吧......居中。如果视口小于图像，则会导致背景图像移动。如果你想保持居中background-position，你也可以使用mediaqueries来改变视口变小时的位置。

这是一个片段（在整页中查看*并更改浏览器大小以查看效果）：

＆＃13;

body {
  background-image: url("https://pbs.twimg.com/media/DPXJDjmUMAA2oE3.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #cccccc;
  margin-bottom: 100px;
  min-width: 600px;
  max-width: 1800px;
  max-height: 720px;
}

@media screen and (max-width: 600px) {
  body {
    background-size: 600px;
    background-position: top left;
  }
}

＆＃13;

<body>
  <center>
    <h1>
      hellooo!
    </h1>
  </center>
</body>

＆＃13;

*）运行代码段 - ＆gt;整页

在某个点之后停止页面缩放

1 个答案: