Question

我正在此着陆页上工作，我想向主体添加最大宽度，以便在较大尺寸的屏幕上仍看起来像正常尺寸。问题是它在某些元素的左侧添加了空白或其他内容。起初，我只把它放在网格上，看上去还不错，所以我把它留了下来。问题是，现在当我也滚动时，可以在导航栏上看到它，并且可以看到很大的时间。有办法解决这个问题吗？这是密码笔https://codepen.io/raul-rogojan/full/LoOoVm，这是我在身上的密码。

body {
  max-width: 1330px;
  margin: auto;
  overflow-x: hidden;
  font-family: 'Catamaran', sans-serif;
}

Answer 1

由于此原因，您设置了max-width: 1330px;。您必须提供应在所有屏幕上均等设置的屏幕尺寸，因此，如果将其设置为max-width: 100vw，将可以解决您的问题。

Answer 2

max-width: 1330px;是导致您出现问题的原因，因为它只会影响大于指定尺寸的屏幕尺寸。

如果将其设置为：max-width: 100vw;，这将清除空白问题。

body {
  max-width: 100vw;
  margin: auto;
  overflow-x: hidden;
  font-family: 'Catamaran', sans-serif;
}

通常来讲，将max-width中的px设置为<body>并不是最佳做法。

Answer 3

尝试一下

body, html{
  margin:0;
  padding:0;
}

这是标准做法，应该足够了。对于某些显示器，设置最大宽度并不实际。您应该始终使用百分比或视口宽度。

使用最大宽度时不需要的空间

3 个答案: