调整屏幕大小时，逐渐将 body 的边距减小到 0

Question

我正在查看 1920*1080 分辨率的网页。从右到左展开所有内容太宽了，所以我在正文上申请：

width: 77%;
background: #eee;

获取灰边距。

77%*1920 = 1478，所以这意味着一旦 window 尺寸 i 低于 1478px，我就不想要任何边距。

但是，当 window 尺寸逐渐减小到 1478 时，我也想减小边距。例如：1920-1478=442，一半是221，那么当window尺寸为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%;
       }
  }

Answer 1

您实际上想要做的是给容器一个 max-width: 1498px，因此不要将规则应用于 body，而是使用容器元素（例如 <main> ) 并使用 margin: 0 auto

给它一个居中对齐

看大分辨率的例子

body {
   padding: 0;
   margin: 0;
   background: #eee;
}
main {
   max-width: 1498px;
   background: #fff;
   margin: 0 auto;
}

<main>

   main element
   
</main>

调整屏幕大小时，逐渐将 body 的边距减小到 0

gradually reduce margin of body to 0 when screen is resized

css

margins