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

Question

我正在构建博客布局。目标是使内容位于窗口的中心并合理对齐，并且最大宽度和到窗口边框的最小距离。

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

所以，下面的解决方案中，我将max-width与margin-left: auto; margin-right: auto结合在一起，另外，我在设置margin-left: 2em; margin-right; 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图像，因为我不擅长对此进行解释。

这里很糟糕：请注意，在调整大小时，文本在窗口边框上爆炸了一段时间。我不要这个我希望2x2em边距（以59em的宽度插入）应该开始起作用。相反，在调整大小期间（也就是某些窗口大小的填充），会有一段时期，文本在窗口边框上爆炸。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS83d2FJYm41LmdpZiJ9” alt =“不良保证金行为”>

这是好人。该媒体查询带有max-width: 80em。这具有我想要的行为。看看文本是如何永远不会碰到窗口边框的，而只是平滑地开始从其撤退。 80em是一个神奇的数字（至少对于我来说，是从台式机上的多个浏览器查看的-我不知道这是否是我的问题）。更少，我使文本靠近边界，然后对齐到我的2em边距。更多，它是左对齐而不是居中。

Answer 1

关于...

<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>

和...

* {
    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;
}

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

或者您可以绘制图表或其他东西吗？我不确定我是否理解这个问题...

也许是边框问题。...

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

Answer 2

1. 这里我在做什么错？

2. 使得80-4 = 55的数学是什么？] >>

主要问题是媒体查询使用文档的样式，而不是container类。这意味着查询中的1em与1em div中的container不同。例如，此代码段使用与文档使用的文本相同的样式，因此可以正常工作。请注意，我还将主体的边距设置为0，因为在媒体查询中还包括主体的边距。我相信您会同意，这种解决方案不是理想的结果。

不太好的版本

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  text-align: justify;
}

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

body {
  margin: 0;
}
<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>

3. 应该如何实现这个目标？

相反，我会推荐一个flexbox。将container类样式设置为公正

display: flex;
justify-content: center;
并将另一个样式移到content类。将content类的页边距设置为auto 2em。 （请参见下面的代码段）
良好的Flexbox版本

.container {
  display: flex;
  justify-content: center;
}

.content {
  margin: auto 2em;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}
<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>