html - 缩小屏幕尺寸时保持边距？

Question

我正在测试我的本地网站大小，当我意识到随着我缩小窗口，左右边距空间(主要是右边)不断消失。

我曾尝试通过指定边距(例如 2rem 或 50px)来编辑 html 和 body CSS，但这没有用，甚至尝试了 @media 功能，但也没有用。那些做的唯一一件事就是穿上我不想让它做的 body ，因为它应该居中。这是我目前所拥有的:

html {
  background-color: rgb(16,17,140);
  color: white;
  text-align: center;
  font-family: cambria;
  height: 100%;
}

body {
  width: 65rem;
  background-color: rgb(35,145,241);
  padding: 2rem 0rem;
  -webkit-border-radius: 3rem;
  margin: 0 auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

有没有办法在不影响居中主体放置的情况下修复窗口收缩期间的边距？

Answer 1

您已将页边距设置为 0 auto - 这实际上将使您的元素在页面中居中。问题是您已将此处的宽度明确设置为 65rem(这有点奇怪 - 这是对 REMs 的深入探讨)

基本上，当您现在使用大屏幕时，您的宽度上限为 65rem，因此您的 body 元素只会那么大。 margin: 0 auto; 否则会将其居中。随着它变小，您的 body 将保持该宽度 - 边缘似乎消失了。

移除 body 的宽度并明确设置边距应该可以达到您想要的效果。

body {
  background-color: rgb(35,145,241);
  padding: 2rem 0rem;
  -webkit-border-radius: 3rem;
  margin: 0 50px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}