Css 调整屏幕大小时，逐渐将主体边距减小到0

我正在看一个1920*1080分辨率的页面。 它太宽了，无法从右到左传播所有内容，所以我在身体上应用：

width: 77%;
background: #eee;

以获得灰色边缘

77%*1920=1478，这意味着一旦窗口大小小于1478px，我就不需要任何利润

然而，当窗口的大小减少到1478时，我也希望减少边距。 例如：1920-1478=442，一半是221，所以当窗口大小为1478+221=1699时，边距应该是88.5%，而不是77%

所以我需要一些计算，对于任何给定的尺寸都可以。这是一种常见的做法，不是吗？但如何做到这一点呢

body {

  width: 77%;
  background: #eee;
  margin: 0 auto;
}

   @media (max-width: 1700px) {
       body {
    width: 89%;
       }
  }

   @media (max-width: 1498px) {
       body {
    width: 100%;
       }
  }

---

实际上，您要做的是为容器指定一个

最大宽度：1498px

，因此不要将规则应用于

主体

，而是使用容器元素（例如

），并使用

边距：0 auto

请参阅具有大分辨率的示例

正文{
填充：0；
保证金：0；
背景：#eee；
}
主要{
最大宽度：1498px；
背景：#fff；
保证金：0自动；
}

主要元素

不太清楚：您是在说右页边距还是左页边距？内容是集中的吗？在哪个视口中希望边距为0？还有221px？请分享一些代码，包括页边空白，以内容为中心，是的。边距应显示为77%，一旦达到1478宽度，边距将减少到100%。添加了一些代码77%不是边距：在您的示例中是主体的宽度。你的实际利润率是11.5%，左右：（100-77）/2