html - CSS 宽度和边距不与媒体查询相加

Question

我正在构建博客布局。目标是使内容在窗口中居中并对齐，具有最大宽度和与窗口边框的最小距离。

我已经通过结合使用 max-width 和媒体查询来将边距设置为特定阈值。我尝试将 max-width 和 fixed margin-left 和 margin-right 放在一起，但这失败了。

所以，我采用了下面的解决方案，其中我将 max-width 与 margin-left: auto; 相结合； margin-right: auto，另外我有一个媒体查询，我设置了 margin-left: 2em;右边距； 2em.

这大部分工作正常，但我对我必须定义的媒体查询感到非常困惑才能使其无缝工作。 CSS 在下面，您可以看到示例页面 here .

我希望为我的内容设置 max-width: 55em;，并在 (max-width: 59em) 处启动媒体查询，并在任意一个上设置边距2em 的一侧，应该有一个无缝的过渡，文本永远不会触及窗口的边界。

在下面的版本中，我到达了一个过渡点，在这个过渡点中，文本在一定范围内接触窗口的边缘，然后边距开始出现并且文本从边缘缩回。我计算出 55+4=59，所以在 59 处，我得到总共 4em 的边框，此时文本应该从边缘后退，因为我将窗口调整得更小；这不会发生。

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (max-width: 59em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (max-width: 59em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}

<div class="container">
  <div class="content">
    <article>
      Here is a nice long paragraph which should
      certainly hit the wrap limit.
      It should do this because it is a long paragraph,
      with more words and characters than fit in the
      maximum width configured for this page.
      I have written multiple sentences in a row, to
      ensure that this will take ample screen space horizontally.
      I am good at writing like this.
    </article>
  </div>
</div>

下面是我想要的值，你可以看到一个版本 here .除了媒体查询:(max-width: 80em) 之外，这里的一切都一样。我纯粹是通过猜测和检查来到这里的。如果我缩小窗口大小，我会看到一个平滑的过渡，其中文本永远不会接近或接触窗口边框。

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (max-width: 80em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (max-width: 80em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}

<div class="container">
  <div class="content">
    <article>
      Here is a nice long paragraph which should
      certainly hit the wrap limit.
      It should do this because it is a long paragraph,
      with more words and characters than fit in the
      maximum width configured for this page.
      I have written multiple sentences in a row, to
      ensure that this will take ample screen space horizontally.
      I am good at writing like this.
    </article>
  </div>
</div>

所以，我的问题是以下一项、部分或全部:

1. 我做错了什么？
2. 80-4=55 的数学公式是什么？
3. 应该如何实现这个目标？

编辑: 添加一些 gif，因为我不善于解释。

这里很糟糕:请注意，有一段时间我正在调整文本在窗口边框上的位置。我不想要这个。我希望以 59em 的宽度开始的 2x2em 边距应该开始产生效果。取而代之的是，在调整大小时(也就是一些特定窗口大小的人口)期间，文本会撞到窗口边框。

这是好的。这有一个 max-width: 80em 的媒体查询。这具有我想要的行为。看看文本是如何从不碰到窗口边界的，只是平稳地从它开始撤退。 80em 是一个神奇的数字(至少对我来说是从桌面上的多个浏览器查看——我不知道这是否是我的问题)。更少，我让文本接近边界，然后它捕捉到我的 2em 边距。更多，而且是左对齐，而不是居中。

Answer 1

那...呢

* {
  box-sizing: border-box;
  /* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
}

.container {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  border: 1px solid red;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (min-width: 900px) {
  .container {
    /* something else */
  }
}

<section class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, doloremque iste sequi est autem officia asperiores, illo, vero reiciendis incidunt provident itaque laborum quidem! Aut nisi eaque a itaque numquam.</p>
</section>

可能是边界框的问题....

https://www.paulirish.com/2012/box-sizing-border-box-ftw/